理解, 并 在 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. 每个reducer都会检查action的类型是否与自己的类型匹配，并相应地更新状态的相关部分。 然后，更新后的状态存储在 Redux 中 store，并且任何连接的组件都会根据新状态重新渲染。

示例场景

想象一个待办事项列表应用程序。 ADD_TODO 当用户添加新的待办事项时，将调度一个操作，并将待办事项的 类型和文本作为负载。 todos 缩减器接收此操作，将新的 todo 添加到状态，并返回更新后的状态。

结论

了解 Redux store、 actions 和 reducers 交互方式对于有效的状态管理至关重要。 这种架构确保了清晰的关注点分离，并且可以轻松管理复杂的应用程序状态。 当您继续使用 Redux 进行开发时，这些概念将构成您的状态管理策略的基础。