close

Понимание и в _ Redux Store Actions Reducers React

В приложении на базе Redux архитектура вращается вокруг трех основных концепций: Redux store, actions и reducers. Давайте углубимся в каждую из этих концепций и посмотрим, как они работают вместе.

Redux Store

Redux store — это единый источник достоверной информации, который хранит полное состояние вашего приложения. По сути, это объект JavaScript, содержащий данные, представляющие все состояние приложения. Вы создаете, store используя createStore функцию из библиотеки Redux.

Actions

Actions — это простые объекты JavaScript, описывающие что-то, что произошло в приложении. Они содержат type поле, в котором указывается тип выполняемого действия, а также могут быть включены дополнительные данные. Actions создаются с помощью создателей действий, которые представляют собой функции, возвращающие объекты действий. Например:

// Action Types  
const ADD_TODO = 'ADD_TODO';  
  
// Action Creator  
const addTodo =(text) => {  
  return {  
    type: ADD_TODO,  
    payload: text  
  };  
};

Reducers

Reducers указать, как изменяется состояние приложения в ответ на actions. Редюсер — это чистая функция, которая принимает текущее состояние и действие в качестве аргументов и возвращает новое состояние. Reducers объединяются в один корневой редуктор с помощью combineReducers функции. Вот простой пример:

// Reducer  
const todosReducer =(state = [], action) => {  
  switch(action.type) {  
    case ADD_TODO:  
      return [...state, action.payload];  
    default:  
      return state;  
  }  
};  
  
// Combine Reducers  
const rootReducer = combineReducers({  
  todos: todosReducer,  
  // ...other reducers  
});

Работаем вместе

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

Пример сценария

Представьте себе приложение со списком дел. Когда пользователь добавляет новую задачу, действие отправляется с типом ADD_TODO и текстом задачи в качестве полезной нагрузки. Редуктор задач получает это действие, добавляет новую задачу в состояние и возвращает обновленное состояние.

Заключение

Понимание того, как Redux store, actions и reducers взаимодействуют, имеет решающее значение для эффективного управления состоянием. Эта архитектура обеспечивает четкое разделение задач и упрощает управление сложными состояниями приложений. По мере того, как вы продолжаете разрабатывать Redux, эти концепции станут основой вашей стратегии управления состоянием.