Вам, мабуть, не потрібен Redux!

Люди часто вибирають Redux, навіть не потребуючи цього.

«Чи буде наша програма масштабована без неї?».

Тоді розробники скаржаться на складність, внесену в їхній код:

«Чому мені потрібно змінити 3 файли, щоб запустити функцію?»

Справді, чому?

Redux, React, функціональне програмування, незмінність і все інше звинувачують у тому, що вони є джерелом усіх проблем, і я це розумію. Нормально порівнювати Redux з підходом, якому не потрібен шаблонний код для оновлення стану, і зробити висновок, що Redux просто складний. У певному сенсі це правда, і це навмисно.

Redux пропонує контракт.

Він просить вас взяти на себе зобов’язання:

  • Опишіть стан програми за допомогою простих об’єктів і масивів.
  • Опишіть системні зміни за допомогою простих об’єктів.
  • Опишіть логіку, яка обробляє зміни за допомогою функцій.

Жодне з цих обмежень не є необхідним для створення програми, з або без React. Насправді, це сильні обмеження, і вам слід двічі подумати, перш ніж прийняти їх (навіть частково) для своєї програми.

Чи є у вас (справді) вагомі причини для цього?

Ці обмеження є привабливими, оскільки вони допомагають створювати програми, які:

Якщо ви працюєте над а розширюваний термінал, А налагоджувач javascript або різновид веб-програми, можливо, варто розглянути деякі з цих ідей (які, до речі, не є па новини).
Тим не менш, якщо ви вивчаєте React, не використовуйте Redux за замовчуванням. Замість цього навчіться думати в React. Поверніться до Redux, якщо ви дійсно відчуваєте потребу або хочете спробувати щось нове. Використовуйте його з обережністю, як і з дуже впевненим інструментом.
Якщо ви відчуваєте, що ви змушені робити «спосіб Redux», це може бути ознакою того, що ви або ваша команда ставитеся до речі занадто серйозно. Це ні більше, ні менше, ніж інструмент у вашому наборі інструментів, експеримент хто має виходить з-під контролю.
Нарешті, пам’ятайте, що ви можете реалізувати ідеї Redux без використання Redux.
Наприклад, ось компонент React з локальним станом:

import React, { Component } from 'react';
class Counter extends Component {
  state = { value: 0 };
  increment = () => {
    this.setState(prevState => ({
      value: prevState.value + 1
    }));
  };
  decrement = () => {
    this.setState(prevState => ({
      value: prevState.value - 1
    }));
  };
  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

Це дуже добре так. Серйозно, варто повторити:

Місцеві штати в порядку.

Аналогом, який пропонує Redux, є додавання непрямого напряму, щоб відокремити «що сталося» від «як це змінилося».
Це ще хороший шлях? Ні, це компроміс.
Наприклад, ми можемо витягти редуктор з нашого компонента:

import React, { Component } from 'react';
const counter = (state = { value: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 };
    case 'DECREMENT':
      return { value: state.value - 1 };
    default:
      return state;
  }
}
class Counter extends Component {
  state = counter(undefined, {});
  dispatch(action) {
    this.setState(prevState => counter(prevState, action));
  }
  increment = () => {
    this.dispatch({ type: 'INCREMENT' });
  };
  decrement = () => {
    this.dispatch({ type: 'DECREMENT' });
  };
  render() {
    return (
      <div>
        {this.state.value}
        <button onClick={this.increment}>+</button>
        <button onClick={this.decrement}>-</button>
      </div>
    )
  }
}

Зауважте, що ми щойно використовували Redux без запуску npm install. Оце Так!
Чи варто робити це з вашими компонентами з повним станом? Ймовірно, ні. Насправді, якщо у вас немає плану скористатися цим додатковим непрямим напрямком. На нашому жаргоні важливо мати план.
Бібліотека Redux — це набір помічників для монтування редукторів у глобальний об’єкт зберігання. Ви можете використовувати його з помірністю або без неї.
Але якщо ви використовуєте його, переконайтеся, що ви отримаєте щось натомість...
Оригінальна стаття de Дан Абрамов
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.k0dntcu9w
переклад з англійської JS Staff
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC – сервісна компанія, що спеціалізується на розробці JavaScript. Ми є затвердженим навчальним центром. Знайдіть всю нашу технічну підготовку на нашому партнерському сайті, присвяченому навчанню” btn_label=”Наше навчання” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]