Redux-数据流

什么是 Redux？

Redux 是一个 JavaScript 库，它是一个状态容器，可以将整个应用程序的状态存储在一个地方，并通过相应的操作对其进行更改。Redux 的设计目标是使状态管理更加可预测且易于调试。

Redux 数据流

Redux 的数据流由以下四个步骤组成：

1. Action

Action 是应用程序状态更改的一个描述。Action 是一个简单的 JavaScript 对象，其中 type 属性被用来描述更改的类型。

例如，下面的代码是一个简单的 Action：

{
  type: 'ADD_TODO',
  payload: {
    text: 'Learn Redux',
    completed: false
  }
}

2. Reducer

Reducer 是一个用于更改应用程序状态的纯函数。它接收当前状态和 Action，并返回一个新的状态。

(state, action) => newState

例如，我们可以创建一个名为 'ADD_TODO' 的 Reducer 来处理 上面的 Action：

function todosReducer(state = [], action) {
  switch (action.type) {
    case "ADD_TODO":
      return [
        ...state,
        {
          text: action.payload.text,
          completed: action.payload.completed
        }
      ];
    default:
      return state;
  }
}

3. Store

Store 是应用程序状态的单一来源。它由 Redux 提供，并使用当前的 Reducer 来管理应用程序状态。Store 还提供了一些方法，如 dispatch 和 getState，它们可用于更改和获取状态。

const store = createStore(todosReducer);

4. View

View 视图通过 dispatch 方法发送 Action 来更改 Store 中的状态，然后通过 Subscribe 方法监听 Store 中状态的更改，以更新用户界面。

例如，我们可以使用 React 和 React-Redux 来链接 Store 和 React 组件：

const mapStateToProps = state => ({
  todos: state.todosReducer
});

const mapDispatchToProps = dispatch => ({
  addTodo: todo => dispatch(addTodoAction(todo))
});

const TodoList = ({ todos, addTodo }) => (
  <div>
    <ul>
      {todos.map(todo => (
        <li key={todo.text}>{todo.text}</li>
      ))}
    </ul>
    <button onClick={() => addTodo({text: 'Learn Redux', completed: false})}>Add Todo</button>
  </div>
);

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

总结

Redux 维护应用程序状态的单一来源和流动，使状态更改更加可预测和易于调试。Redux 的大量优点已被证明使之成为 Web 应用程序状态管理的有力工具。