都说redux好，为啥我两年前端没咋用过Redux🔨？（Redux、Redux Toolkit、Redux Thunk、React-Redux）

说来惭愧，两年前端人了，之前的所有项目都没有用redux系列状态管理，大部分都是mobx，面试的时候被问题来都不太熟悉，那就总结一下redux系列

一、Redux

1.1 Redux 作用

Redux 是一个 JavaScript 状态管理库，主要用于管理应用的状态并确保状态的一致性和可预测性。Redux 采用了单一数据源的概念，即整个应用的状态被存储在一个 JavaScript 对象树中，通过一个统一的 "store" 管理。应用的状态只能通过触发 "action" 来改变，所有的状态更新逻辑都放在 reducer 函数中。Redux 的核心思想是 单向数据流，使得应用的状态变化更加可控和可预测。

1.2 Redux 主要概念

• Store：Redux 中的状态存储中心，包含整个应用的状态。
• Action：描述状态改变的对象，通常是一个包含类型（type）和数据（payload）的对象。
• Reducer：纯函数，接收当前状态和 action，返回新的状态。
• Dispatch：用于触发 actions，从而让 state 发生变化。

1.3 使用方式

1. 创建 store：

   import { createStore } from 'redux';
   
   // 定义初始状态
   const initialState = { count: 0 };
   
   // 定义 reducer 函数
   function counterReducer(state = initialState, action) {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, count: state.count + 1 };
       case 'DECREMENT':
         return { ...state, count: state.count - 1 };
       default:
         return state;
     }
   }
   
   // 创建 Redux store
   const store = createStore(counterReducer);
   

2. 触发 action：

   store.dispatch({ type: 'INCREMENT' });
   store.dispatch({ type: 'DECREMENT' });
   

---

二、Redux Toolkit

2.1 Redux Toolkit 作用

Redux Toolkit 是官方推荐的 Redux 开发工具集，它封装了 Redux 的常用功能，并提供了简化的 API，旨在减少开发者编写样板代码（boilerplate code）的负担，提供更好的开发体验。Redux Toolkit 集成了 redux-thunk 中间件，内置了不可变数据结构支持，并且提供了易用的开发工具。

2.2 Redux Toolkit 主要特性

• 简化创建 Store：通过 configureStore() 自动配置 Redux store 和中间件。
• 简化 Reducer 和 Action：通过 createSlice() 自动生成 action 和 reducer。
• 内置 Redux Thunk：默认集成了异步处理的支持。
• Immutable 数据更新：通过 immer 库，允许以可变方式编写 reducer。

2.3 使用方式

1. 安装 Redux Toolkit：

   npm install @reduxjs/toolkit react-redux
   

2. 创建 store 和 slice：

   import { createSlice, configureStore } from '@reduxjs/toolkit';
   
   // 创建 slice
   const counterSlice = createSlice({
     name: 'counter',
     initialState: { count: 0 },
     reducers: {
       increment: state => {
         state.count += 1;  // 使用 immer，使得 state 可变
       },
       decrement: state => {
         state.count -= 1;
       },
     },
   });
   
   // 创建 store
   const store = configureStore({
     reducer: counterSlice.reducer,
   });
   

3. 使用 React-Redux 连接：

   import { useSelector, useDispatch } from 'react-redux';
   
   function Counter() {
     const count = useSelector(state => state.count);
     const dispatch = useDispatch();
   
     return (
       <div>
         <p>{count}</p>
         <button onClick={() => dispatch(counterSlice.actions.increment())}>Increment</button>
         <button onClick={() => dispatch(counterSlice.actions.decrement())}>Decrement</button>
       </div>
     );
   }
   

---

三、Redux Thunk

3.1 Redux Thunk 作用

Redux Thunk 是 Redux 的中间件，它允许你编写返回函数而不是普通 action 对象的 action creators。这个函数可以延迟 dispatch 一个 action 或者在 dispatch 之前执行异步操作。这对于处理像 API 请求、延迟更新等异步任务非常有用。

3.2 使用方式

1. 安装 Redux Thunk：

   npm install redux-thunk
   

2. 配置 Redux store 时，加入 thunk 中间件：

   import { createStore, applyMiddleware } from 'redux';
   import thunk from 'redux-thunk';
   
   const store = createStore(counterReducer, applyMiddleware(thunk));
   

3. 使用 Thunk 实现异步操作：

   const incrementAsync = () => {
     return (dispatch) => {
       setTimeout(() => {
         dispatch({ type: 'INCREMENT' });
       }, 1000);
     };
   };
   
   store.dispatch(incrementAsync());
   

Redux Toolkit 已经集成了 Redux Thunk，因此使用 Redux Toolkit 时不需要单独安装和配置它。

---

四、React-Redux

4.1 React-Redux 作用

React-Redux 是官方提供的用于将 Redux 和 React 结合的库，它提供了两个重要的 API：Provider 和 connect（或者 useSelector 和 useDispatch 钩子）。Provider 组件将 Redux store 提供给整个应用，connect 或钩子则用于在 React 组件中访问 Redux store 中的状态，并触发 actions。

4.2 使用方式

1. 安装 React-Redux：

   npm install react-redux
   

2. 使用 Provider 提供 store：

   import { Provider } from 'react-redux';
   import { store } from './store';
   
   function App() {
     return (
       <Provider store={store}>
         <Counter />
       </Provider>
     );
   }
   

3. 使用 useSelector 和 useDispatch 钩子连接组件：

   import { useSelector, useDispatch } from 'react-redux';
   
   function Counter() {
     const count = useSelector((state) => state.count);
     const dispatch = useDispatch();
   
     return (
       <div>
         <p>{count}</p>
         <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
         <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
       </div>
     );
   }
   

---

五、总结

1. Redux：核心库，提供了单向数据流、状态管理的基本功能。
2. Redux Toolkit：Redux 的封装库，简化了 Redux 的配置和使用，推荐用于开发现代 Redux 应用。
3. Redux Thunk：中间件，允许编写异步 action 处理逻辑，通常与 Redux 配合使用。
4. React-Redux：用于将 Redux 和 React 组件结合，提供了 Provider 和钩子（useSelector、useDispatch）来连接 React 组件与 Redux store。