🤔 Какие правила у работы redux ?

Redux работает по трем основным принципам: единое хранилище для всего состояния приложения, изменения в состоянии возможны только через отправку действий, и редукторы — чистые функции, определяющие, как действия изменяют состояние.

🚩Основные принципы

🟠Единый источник правды
Все состояние приложения хранится в одном объекте хранилища (store). Это обеспечивает централизованное управление состоянием, что упрощает отладку и тестирование. В приложении должно быть только одно хранилище.

import { createStore } from 'redux';
   import rootReducer from './reducers';

   const store = createStore(rootReducer);   

🟠Состояние доступно только для чтения
Единственный способ изменить состояние — это отправить действие (action), описывающее изменение. Действия — это простые объекты, которые имеют свойство type и, возможно, дополнительные данные. Изменения состояния должны происходить только через действия.

const increment = () => ({
     type: 'INCREMENT',
   });

   store.dispatch(increment());

🟠Изменения состояния происходят с помощью чистых функций
Для описания того, как действия изменяют состояние, используются редюсеры (reducers). Редюсеры — это чистые функции, которые принимают предыдущее состояние и действие в качестве аргументов и возвращают новое состояние. Редюсеры должны быть чистыми функциями и не должны иметь побочных эффектов.

const initialState = {
  count: 0,
};

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'DECREMENT':
      return {
        ...state,
        count: state.count - 1,
      };
    default:
      return state;
  }
};

const store = createStore(counterReducer);
   

🚩Дополнительные правила и рекомендации

🟠Избегайте мутаций состояния:
Состояние в Redux должно быть неизменяемым. Вместо изменения текущего состояния, редюсеры должны возвращать новые объекты состояния. Используйте методы, которые не изменяют исходные объекты, такие как Array.prototype.map, Array.prototype.filter, и оператор распространения (spread operator) для создания новых объектов и массивов.

const newState = {
  ...state,
  count: state.count + 1,
};

🟠Используйте сериализуемые действия и состояния
Для упрощения отладки и поддержки инструментов разработки (например, Redux DevTools), действия и состояния должны быть сериализуемыми (не содержать циклических ссылок и неподдерживаемых типов данных, таких как функции или символы).

const action = {
  type: 'ADD_TODO',
  payload: {
    id: 1,
    text: 'Learn Redux',
  },
};

🟠Используйте нормализованные состояния: Храните состояния в нормализованной форме, чтобы избежать избыточности данных и упростить управление состояниями. Например, используйте объекты, где ключами являются идентификаторы, а значениями — данные.

const initialState = {
  todos: {
    byId: {
      1: { id: 1, text: 'Learn Redux' },
      2: { id: 2, text: 'Build an app' },
    },
    allIds: [1, 2],
  },
};

Ставь 👍 и забирай 📚 Базу знаний