react中redux的使用及redux-persist 数据持久化（精简版）

关注微信公众号【前端成长营】持续更新…

redux的官方文档
react项目路由搭建（简单版）

微信扫码体验一下 （说不定哪天你就用得上）

1.安装 Redux Toolkit 和 React-Redux

npm install @reduxjs/toolkit react-redux
在src目录中创建 store文件目录 创建 / index.js

import { configureStore } from "@reduxjs/toolkit";
export default configureStore({
  reducer: {
  },
});

2.在store中创建 reducers目录 创建比如 aside.js 或者 tab.js 下面以tab为例

（也可以不创建redecers目录 根据自己开发习惯，主要为了分类，把命名空间的store都放一起）

import { createSlice } from "@reduxjs/toolkit";

const tabSlice = createSlice({
    name:'tab',
    initialState: {
        fold: false,
    },
    reducers:{
     collapseMenu :state=>{  //collapseMenu将修改fold的值
            state.fold=!state.fold
        }
    
    }
})
export const {collapseMenu}= tabSlice.actions  
export  default tabSlice.reducer
//tabSlice.actions包含整个所有方法

等这一步完成后 在store/index.js文件中导入tab

import { configureStore } from '@reduxjs/toolkit'
import tab from './reducers/tab'

export default configureStore({
    reducer:{
        tab
    }
})


//如果页面中想使用initialState的值 使用
// import { useSelector } from "react-redux";
// const count = useSelector((state) => state.tab.fold);

3. 项目根目录 index.js文件中

使用 Provider 包裹App 并传入store

import { Provider } from "react-redux";
import store from "./store/index";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
      <Provider store={store}>
      <App />
      </Provider>
  </React.StrictMode>
);

4. 在组件中使用 store中的数据

引入import {useSelector} from ‘react-redux’

5. 使用reducer 修改store中的数据

在组件的方法中 通过dispatch接收 useDispatch（） 方法 然后调用 上面第2步中tab.js中的方法 是否

6. redux-persist 是一个在 Redux 应用程序中实现持久化的库，它可以将 Redux store 中的状态数据保存到浏览器的 localStorage、sessionStorage 或其他存储中，以便在页面刷新或重新加载时恢复这些数据。以下是 redux-persist 的基本使用教程：**

1. 安装 redux-persist
   首先，你需要在你的项目中安装 redux-persist。可以使用 npm 或 yarn 进行安装：

npm install redux-persist
# 或者
yarn add redux-persist

2. 配置 redux-persist
   在 Redux 应用的根目录下，你需要创建一个配置文件来配置 redux-persist 的设置。例如，你可以创建一个名为 persistConfig.js 的文件，并在其中指定要持久化的 Redux 存储的键、存储引擎以及其他配置选项：

import storage from 'redux-persist/lib/storage'; // 默认使用localStorage

const persistConfig = {
  key: 'root', // 可选，用于在localStorage中设置键名
  storage, // 存储引擎，默认使用localStorage
  // 其他配置选项...
};

export default persistConfig;

3. 创建持久化的 Reducer
   在 Redux 应用的根目录下，你需要创建一个根 reducer，并使用 redux-persist 的 persistReducer 函数来包装你的根 reducer。这样，你就可以指定哪些 reducer 的状态应该被持久化：

import { combineReducers } from 'redux';
import persistReducer from 'redux-persist/es/persistReducer';
import persistConfig from './persistConfig'; // 引入之前创建的persistConfig

// 你的 reducer 文件
import rootReducer from './reducers';

const persistedReducer = persistReducer(persistConfig, rootReducer);

export default persistedReducer;

4. 创建 Redux 存储
   在应用的入口文件中（通常是 index.js 或 App.js），你需要创建 Redux 存储，并使用 redux-persist 的 persistStore 函数和 PersistGate 组件来包装你的应用。PersistGate 组件会阻塞你的应用的渲染，直到持久化的状态被加载完成：

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import persistedReducer from './reducers/persistedReducer'; // 引入之前创建的persistedReducer

const store = createStore(persistedReducer);
const persistor = persistStore(store);

// 在你的应用根组件中使用 PersistGate
function App() {
  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        {/* 你的应用组件 */}
      </PersistGate>
    </Provider>
  );
}

export default App;