Redux

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。它围绕 Redux 核心，简化了大多数 Redux 任务，防止了常见错误，使得编写 Redux 应用程序更加容易。

一、安装 Redux Toolkit

npm install @reduxjs/toolkit
npm install react-redux

二、使用 Redux Toolkit

在 src 下新建一个 store 文件夹用来存放 redux 相关内容，在 store 中新建一个 reducers 文件夹（用来存放不同业务模块的 reducer）和 index.js 文件。

以一个 Tab 模块为例：

1. 创建一个切片：createSlice

   store/reducers/tab.js

   import { createSlice } from "@reduxjs/toolkit";
   ​
   const tabSlice = createSlice({
     name: 'tab',
     initialState: {
       isCollapse: false
     },
     reducers: {
       collapseMenu: state => {
         state.isCollapse = !state.isCollapse
       }
     }
   })
   ​
   export const { collapseMenu } = tabSlice.actions
   export default tabSlice.reducer
   

2. 配置切片：configureStore

   store/index.js

   import { configureStore } from "@reduxjs/toolkit";
   import TabReducer  from './reducers/tab';
   ​
   export default configureStore({
     reducer: {
       tab: TabReducer
     }
   })
   

3. 在项目 index.js 中挂载 store

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import './index.css';
   import App from './App';
   import reportWebVitals from './reportWebVitals';
   import { Provider } from 'react-redux';
   import store from './store';
   ​
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <React.StrictMode>
       <Provider store={store}>
         <App />
       </Provider>
     </React.StrictMode>
   );
   ​
   reportWebVitals();
   

4. 在组件中读取和修改切片中的值

   import { useSelector, useDispatch } from "react-redux";
   import { collapseMenu } from '../store/reducers/tab'
   ​
   const Home = () => {
     const collapsed = useSelector(state => state.tab.isCollapse)
     const getStatus = () => {  
       console.log('状态', collapsed);
     }; 
     const dispatch = useDispatch()
     const handleChange = () => {  
       dispatch(collapseMenu())
     }; 
     return (
       <>
         <button onClick={getStatus}>获取状态</button> 
         <button onClick={handleChange}>展开收起</button> 
       </>
     )
   }
   ​
   export default Home