4.2状态管理库生态 (Redux 生态, Zustand 生态, Recoil 生态)

文档摘要

4.2状态管理库生态 (Redux 生态, Zustand 生态, Recoil 生态) React 状态管理库生态：Redux, Zustand, Recoil 代码实践与详解 4.2.1 Redux 生态 Redux 是一个可预测的状态容器，它遵循单一数据源、只读状态和纯函数更新的原则。Redux 的生态非常庞大，拥有大量的中间件、工具和社区支持。核心概念： Store: 保存应用状态的单一数据源。 Actions: 描述发生了什么事件的普通 JavaScript 对象。 Reducers: 纯函数，接收先前的状态和 action，返回新的状态。 Dispatch: 触发 action，通知 store 状态需要更新。 Selectors: 从 store 中提取数据的函数。

4.2状态管理库生态 (Redux 生态, Zustand 生态, Recoil 生态)

React 状态管理库生态：Redux, Zustand, Recoil 代码实践与详解

4.2.1 Redux 生态

Redux 是一个可预测的状态容器，它遵循单一数据源、只读状态和纯函数更新的原则。Redux 的生态非常庞大，拥有大量的中间件、工具和社区支持。

核心概念：

Store: 保存应用状态的单一数据源。
Actions: 描述发生了什么事件的普通 JavaScript 对象。
Reducers: 纯函数，接收先前的状态和 action，返回新的状态。
Dispatch: 触发 action，通知 store 状态需要更新。
Selectors: 从 store 中提取数据的函数。

代码实践：

安装 Redux 及相关依赖:
```
npm install redux react-redux
```

定义 Action Types:


// src/actions/types.js
export const ADD_TODO = 'ADD_TODO';
export const TOGGLE_TODO = 'TOGGLE_TODO';

创建 Actions:


// src/actions/index.js
import { ADD_TODO, TOGGLE_TODO } from './types';
export const addTodo = (text) => ({
  type: ADD_TODO,
  payload: text,
});
export const toggleTodo = (id) => ({
  type: TOGGLE_TODO,
  payload: id,
});

创建 Reducer:


// src/reducers/todos.js
import { ADD_TODO, TOGGLE_TODO } from '../actions/types';
const initialState = [];
const todosReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, { id: Date.now(), text: action.payload, completed: false }];
    case TOGGLE_TODO:
      return state.map(todo =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    default:
      return state;
  }
};
export default todosReducer;

创建 Store:


// src/store.js
import { createStore, combineReducers } from 'redux';
import todosReducer from './reducers/todos';
const rootReducer = combineReducers({
  todos: todosReducer,
});
const store = createStore(rootReducer);
export default store;

在 React 组件中使用 Redux:


// src/components/TodoList.js
import React from 'react';
import { connect } from 'react-redux';
import { addTodo, toggleTodo } from '../actions';
const TodoList = ({ todos, addTodo, toggleTodo }) => {
  const handleAddTodo = (e) => {
    if (e.key === 'Enter') {
      addTodo(e.target.value);
      e.target.value = '';
    }
  };
  return (
    <div>
      <input type="text" onKeyDown={handleAddTodo} placeholder="Add Todo" />
      <ul>
        {todos.map(todo => (
          <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};
const mapStateToProps = (state) => ({
  todos: state.todos,
});
const mapDispatchToProps = (dispatch) => ({
  addTodo: (text) => dispatch(addTodo(text)),
  toggleTodo: (id) => dispatch(toggleTodo(id)),
});
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

Provider:


// src/App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import TodoList from './components/TodoList';
function App() {
  return (
    <Provider store={store}>
      <TodoList />
    </Provider>
  );
}
export default App;

Redux 生态的核心成员：

Redux Toolkit: 简化 Redux 开发的官方工具集，包括 configureStore, createSlice, createAsyncThunk 等 API，减少了大量的模板代码。
Redux Thunk: Redux 中间件，允许 dispatch 函数，用于处理异步操作。
Redux Saga: Redux 中间件，使用 Generator 函数来处理异步操作，更强大灵活。
Reselect: 高效的 Redux selectors 库，用于缓存计算结果，避免重复计算。
Redux DevTools: 浏览器扩展，用于调试 Redux 应用，查看 action 日志、状态变化等。

Redux 的优缺点：

优点：
- 可预测性：单向数据流，易于调试和追踪状态变化。
- 中心化管理：所有状态都保存在一个地方，易于维护。
- 强大的生态：大量的中间件和工具，可以满足各种需求。
缺点：
- 样板代码多：需要编写大量的 action types, actions, reducers。
- 学习曲线陡峭：需要理解 Redux 的核心概念。
- 性能问题：如果状态更新频繁，可能会导致性能问题。

Redux 适用场景：

大型、复杂的应用，需要全局状态管理。
需要可预测的状态管理，方便调试和追踪状态变化。
团队协作开发，需要统一的状态管理方案。

Redux 的流程图：

4.2.2 Zustand 生态

Zustand 是一个小型、快速且可扩展的状态管理解决方案。它使用简单的 API，避免了大量的样板代码，非常适合中小型项目。

核心概念：

Store: 使用 create 函数创建的存储状态和更新函数的对象。
State: 存储应用状态的 JavaScript 对象。
Actions: 更新状态的函数，直接修改 state。
Selectors: 从 store 中提取数据的函数。

代码实践：

安装 Zustand:
```
npm install zustand
```

创建 Store:


// src/store.js
import { create } from 'zustand';
const useStore = create((set) => ({
  todos: [],
  addTodo: (text) =>
    set((state) => ({
      todos: [...state.todos, { id: Date.now(), text, completed: false }],
    })),
  toggleTodo: (id) =>
    set((state) => ({
      todos: state.todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      ),
    })),
}));
export default useStore;

在 React 组件中使用 Zustand:


// src/components/TodoList.js
import React from 'react';
import useStore from '../store';
const TodoList = () => {
  const todos = useStore((state) => state.todos);
  const addTodo = useStore((state) => state.addTodo);
  const toggleTodo = useStore((state) => state.toggleTodo);
  const handleAddTodo = (e) => {
    if (e.key === 'Enter') {
      addTodo(e.target.value);
      e.target.value = '';
    }
  };
  return (
    <div>
      <input type="text" onKeyDown={handleAddTodo} placeholder="Add Todo" />
      <ul>
        {todos.map((todo) => (
          <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default TodoList;

Zustand 生态的核心成员：

Zustand Middlewares: Zustand 提供了一些中间件，例如 persist 用于持久化状态，devtools 用于调试。
immer: Zustand 默认使用 immer 库来保证状态的不可变性，简化了状态更新的逻辑。

Zustand 的优缺点：

优点：
- 简单易用：API 简洁，易于学习和使用。
- 代码量少：减少了大量的模板代码。
- 性能优秀：使用 immer 库，保证状态的不可变性，避免了不必要的渲染。
缺点：
- 生态相对较小：相比 Redux，生态不够完善。
- 可预测性稍弱：状态更新直接修改 state，可预测性不如 Redux。

Zustand 适用场景：

中小型应用，需要快速开发和部署。
不需要复杂的全局状态管理。
团队规模较小，需要简单易用的状态管理方案。

Zustand 的流程图：

4.2.3 Recoil 生态

Recoil 是 Facebook 开发的状态管理库，它基于 React 的 hooks，使用 atoms 和 selectors 来管理状态。Recoil 的设计目标是提供更细粒度的状态管理，提高应用的性能。

核心概念：

Atoms: 状态的基本单元，可以被组件订阅。
Selectors: 从 atoms 派生状态的纯函数，可以缓存计算结果。
useRecoilState: 用于读取和更新 atom 的 hook。
useRecoilValue: 用于只读地读取 atom 或 selector 的 hook。
useSetRecoilState: 用于更新 atom 的 hook。

代码实践：

安装 Recoil:
```
npm install recoil
```

定义 Atoms:


// src/atoms/todos.js
import { atom } from 'recoil';
export const todosState = atom({
  key: 'todosState',
  default: [],
});

创建 React 组件:


// src/components/TodoList.js
import React from 'react';
import { useRecoilState } from 'recoil';
import { todosState } from '../atoms/todos';
const TodoList = () => {
  const [todos, setTodos] = useRecoilState(todosState);
  const handleAddTodo = (e) => {
    if (e.key === 'Enter') {
      setTodos([...todos, { id: Date.now(), text: e.target.value, completed: false }]);
      e.target.value = '';
    }
  };
  const toggleTodo = (id) => {
    setTodos(todos.map(todo =>
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };
  return (
    <div>
      <input type="text" onKeyDown={handleAddTodo} placeholder="Add Todo" />
      <ul>
        {todos.map(todo => (
          <li key={todo.id} onClick={() => toggleTodo(todo.id)}>
            <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
              {todo.text}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
};
export default TodoList;

RecoilRoot:


// src/App.js
import React from 'react';
import { RecoilRoot } from 'recoil';
import TodoList from './components/TodoList';
function App() {
  return (
    <RecoilRoot>
      <TodoList />
    </RecoilRoot>
  );
}
export default App;

Recoil 生态的核心成员：

Recoil DevTools: 浏览器扩展，用于调试 Recoil 应用，查看 atoms 和 selectors 的值。
Recoil Persist: 用于持久化 Recoil 状态。

Recoil 的优缺点：

优点：
- 细粒度状态管理：可以更精确地控制组件的渲染，提高性能。
- 基于 React Hooks：与 React 的集成度高，易于学习和使用。
- 并发模式兼容：Recoil 可以很好地与 React 的并发模式一起工作。
缺点：
- 生态相对较小：相比 Redux，生态不够完善。
- 学习曲线陡峭：需要理解 atoms 和 selectors 的概念。
- 调试工具不够完善：相比 Redux DevTools，Recoil DevTools 功能较弱。

Recoil 适用场景：

需要细粒度状态管理，提高应用性能。
需要与 React 并发模式兼容。
对性能要求较高的应用。

Recoil 的流程图：

总结：

特性	Redux	Zustand	Recoil
核心概念	Store, Actions, Reducers, Dispatch, Selectors	Store, State, Actions, Selectors	Atoms, Selectors, useRecoilState/Value/SetState
代码量	多	少	适中
学习曲线	陡峭	简单	陡峭
生态系统	庞大	较小	较小
适用场景	大型、复杂应用	中小型应用	性能敏感型应用
性能	较低	较高	较高
可预测性	高	适中	适中

选择哪个状态管理库取决于你的具体需求和项目规模。Redux 适合大型复杂应用，Zustand 适合中小型应用，Recoil 适合性能敏感型应用。希望本文能帮助你更好地理解这三个库的生态，并做出明智的选择。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/217-react%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%E4%B8%8E%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流