轻松理解Redux原理及工作流程

Redux是一个非常流行的JavaScript状态容器，它被广泛用于React应用程序中，但实际上它可以和任何JavaScript框架一起使用。尽管Redux有时会让人感到有些复杂，但它的工作原理却是相对简单的。本文将深入探讨Redux是如何工作的，以及其中的核心概念。

Redux的核心概念

Redux中有三个核心概念：Store、Action和Reducer。

Store

Store是Redux应用程序中的状态容器。它是一个JavaScript对象，包含了应用程序中所有的状态。你可以通过调用Redux提供的API来访问Store中的状态，并对其进行修改。在创建Redux应用程序时，需要传入一个Reducer函数来初始化Store。

Action

Action代表在Redux应用程序中发生的事件。它是一个JavaScript对象，包含了一个描述事件的字符串类型(type)和任何附加的数据(payload)。在Redux应用程序中，可以通过调用Redux提供的API来创建和触发Action。处理Action的逻辑由Reducer函数来实现。

Reducer

Reducer是一个纯函数，它接收当前状态和一个Action作为参数，然后返回一个新的状态。Reducer应该只负责处理Action，并不关心具体的UI实现。在Redux应用程序中，可以通过调用Redux提供的API来将Reducer函数注册到Store中。

Redux的工作流程

Redux工作的基本流程如下：

1. 触发Action：当用户与应用程序交互时，例如点击按钮或填写表单，可以通过调用Redux提供的API来创建并触发一个Action。

2. 处理Action：处理Action的过程由Reducer函数来实现。Reducer接收当前状态和Action作为参数，并返回一个新的状态。在这一步中，Redux会对Store中的状态进行修改。

3. 更新State：一旦Reducer返回了一个新的状态，Redux会用这个新状态来更新Store中的状态。

4. 反馈State：一旦Store中的状态发生了变化，Redux就会通知所有的观察者，例如React组件，让它们更新自己的UI。

redux实现一个Todo应用程序

为了更好地理解Redux的工作流程，我们来实现一个简单的Todo应用程序。在应用程序中，我们可以添加和删除Todo事项，并将所有事项展示在页面上。

初始化Store

我们开始时需要定义一个初始状态（initialState）来初始化我们的Store。在这个例子中，我们只需要将所有的Todo事项存储在一个数组中。

const initialState = {
  todos: []
};

然后，我们需要编写一个Reducer函数来初始化我们的Store。它会接收一个对象作为状态，以及一个Action作为参数。在这里，我们只需要返回初始状态。

function todosReducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

使用Redux提供的createStore函数来创建Store。

import { createStore } from 'redux';
const store = createStore(todosReducer);

处理Action

接下来，我们需要为我们的Todo应用程序添加一些Action。

const ADD_TODO = 'ADD_TODO';
const REMOVE_TODO = 'REMOVE_TODO';

function addTodoAction(todo) {
  return {
    type: ADD_TODO,
    payload: todo
  };
}

function removeTodoAction(index) {
  return {
    type: REMOVE_TODO,
    payload: index
  };
}

第一个Action用于添加Todo事项，第二个Action用于删除Todo事项。每个Action都是一个简单的JavaScript对象，它们包括一个type属性来描述事件，以及一个payload属性来携带一些数据。

我们在Reducer函数中判断Action类型，根据Action类型执行对应的处理逻辑。

function todosReducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TODO:
      return {
        todos: [...state.todos, action.payload]
      };
    case REMOVE_TODO:
      return {
        todos: [
          ...state.todos.slice(0, action.payload),
          ...state.todos.slice(action.payload + 1)
        ]
      };
    default:
      return state;
  }
}

自此，我们完成了处理Action的逻辑。ADD_TODO Action会在数组中添加一个新的Todo事项，REMOVE_TODO Action会从数组中删除一个已有的Todo事项。

使用React观察Store

最后，我们需要使用React来观察Store，并在Store状态发生变化时更新UI。

我们可以编写一个React组件来渲染Todo事项的列表，并将它添加到我们的应用程序中。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider, useSelector, useDispatch } from 'react-redux';

function Todos() {
  const todos = useSelector(state => state.todos);
  const dispatch = useDispatch();

  const handleAddTodo = () => dispatch(addTodoAction(prompt('Enter todo:')));
  const handleRemoveTodo = index => dispatch(removeTodoAction(index));

  return (
    <div>
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => handleRemoveTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

ReactDOM.render(
  <Provider store={store}>
    <Todos />
  </Provider>,
  document.getElementById('root')
);

在这里，我们使用了React-Redux库来实现组件和Store之间的连接。我们将最高层的组件包裹在Provider组件中，并将Store作为props传递给它。这样，整个应用程序就可以访问Store中的状态了。

我们使用useSelector来选择要渲染的状态。useDispatch返回一个dispatch函数，使我们可以在组件中对Store中的状态进行修改。

在这里，我们使用handleAddTodo函数来添加一个新的Todo事项，使用handleRemoveTodo函数来删除一个已有的Todo事项。最后，我们使用todos.map来遍历todos数组，并将每个Todo事项呈现为一个列表项。

总结

Redux是一个非常流行的JavaScript状态管理器，它为我们提供了一个简单而强大的方法来管理应用程序中的状态。在本文中，我们深度探讨了Redux的工作原理和核心概念，并使用一个简单的例子来演示了如何使用Redux来构建一个Todo应用程序。希望这篇文章能将Redux变得更容易理解。