本文将从零集中介绍React Redux、Redux Toolkit、redux-persist的使用，全文将以最简单的方式介绍，以便快速上手。
导航目录
1. 介绍2. 安装3. 配置3.1 创建store文件夹3.2 编写子模块users.js3.3 统一管理模块index.js3.4 全局配置注册React Redux3.5 试验Redux
1. 介绍
React Redux是React官方提供的Redux绑定库，它提供了一些方便的方法来连接React组件和Redux store。React Redux中文文档Redux Toolkit是一个Redux工具包，它提供了一组方便的方法来简化Redux的开发。Redux Toolkit官方文档redux-persist是一个Redux持久化库，它允许你将Redux store的状态保存到本地存储中，并在需要时将其恢复。redux-persist文档
2. 安装
首先，确保你已经安装了Node.js和npm或yarn。然后，在项目的根目录下运行以下命令来安装React Redux、Redux Toolkit、redux-persist。
# 如果使用npm
npm install react-redux @reduxjs/toolkit redux-persist
# 如果使用yarn
yarn add react-redux @reduxjs/toolkit redux-persist
目前这里最新的版本为：
"react-redux": "^9.1.0",
"@reduxjs/toolkit": "^2.2.1",
"redux-persist": "^6.0.0",
3. 配置
3.1 创建store文件夹
目录结构如下：
src
├─ store
├─ modules
└─ users.js
└─ index.js
├─ App.js
└─ index.js
3.2 编写子模块users.js
在store/modules/users.js文件中进行 这里会以代码注释的形式进行说明
// 1. 导入Reduxjs Toolkit中的createSlice方法
import { createSlice } from '@reduxjs/toolkit';
// 2. 创建一个名为users的slice
const usersSlice = createSlice({
name: 'users',
initialState: {
list: [],
count: 0,
},
reducers: {
// 定义一个名为increment的action 因为是同步方法 支持直接修改state
increment: (state) => {
// 更新state.count为state.count + 1
state.count++;
},
decrement: (state) => {
// 更新state.count为state.count - 1
state.count--;
},
// 定义一个名为incrementByAmount的action
incrementByAmount: (state, action) => {
// 更新state.count为state.count + action.payload
state.count += action.payload;
},
// 定义一个名为setUsers的action
setUsers: (state, action) => {
// 更新state.list为action.payload
state.list = action.payload;
},
},
})
// 3. 解构出来的actionCreater函数
const { increment, decrement, incrementByAmount, setUsers } = usersSlice.actions;
// 模拟异步返回数据
const _callQueryResult = () => {
const start = new Date().getTime();
function _generateRandomNumber () {
return Math.floor(Math.random() * 1000); //生成0到100之间的随机数
}
return new Promise(resolve => {
console.log('%c\n--------响应开始--------', 'color:green;');
setTimeout(() => {
const end = new Date().getTime();
let arr = []
// 生成五个随机数
for (let index = 0; index < 5; index++) {
arr.push(_generateRandomNumber())
}
console.log(`%c--------响应结束--------\n耗时${end - start}ms\n${arr}`, 'color:red;');
resolve(arr)
}, 1000)
})
}
// 异步请求数据
const fetchUsers = () => async (dispatch) => {
// 发送异步请求
const data = await _callQueryResult();
// 派发action，更新state.list
dispatch(setUsers(data));
};
// 4. 以按需导出的方式导出actionCreater
export {
increment,
decrement,
incrementByAmount,
fetchUsers
}
// 5. 以默认导出的方式导出reducer
export default usersSlice.reducer;
3.3 统一管理模块index.js
在store/index.js文件中进行配置 这里会以代码注释的形式进行说明
// 1. 导入官方实现、开箱即用的 Redux 快速开发工具包
import { configureStore, combineReducers } from '@reduxjs/toolkit';
// 2. 导入持久化所需要的插件
import { persistStore, persistReducer } from 'redux-persist';
// 3. 导入本地存储插件，可选storage，cookie，session等
import storage from 'redux-persist/lib/storage';
// 4. 导入子模块reducers
import users from './modules/users.js';
// 4. 导入子模块end
// 创建reducer(合并拆分的reducer)
const rootReducer= combineReducers({
users,
});
// 持久化配置
const persistConfig = {
key: 'root',
storage,
// whitelist: [], // 需要持久化保存的模块，默认保存所有模块（语义：白名单）
// blacklist: [], // 不需要持久化保存的模块，默认不保存任何模块（语义：黑名单）
};
// 5. 创建持久化后的reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
// 6. 创建store
const store = configureStore({
reducer: persistedReducer,
devTools: true, // 是否开启开发者工具，默认true
// 配置中间件：如果使用redux-persist，则需要设置为false，否则控制台报错（非序列化数据）
middleware: (getDefaultMiddleware) => getDefaultMiddleware({
serializableCheck: false,
})
});
// 7. 创建持久化后的store
const persistor = persistStore(store);
// 8. 导出store和持久化后的store
export {
store,
persistor
}
3.4 全局配置注册React Redux
在src/index.js文件中进行配置
React Redux 包含一个
一般用它使用在整个应用的最外层它接受 Redux store 作为 props会把 store 注入到整个应用中使得应用中的任何组件都能够使用 store redux-persist持久化插件为我们提供一个
它是一个容器组件，用于包裹需要持久化保存的组件，确保在持久化保存的状态加载完毕后，再渲染需要持久化保存的组件。它能够将我们之前创建的persistor作为props传递给
import React from 'react';
import ReactDOM from 'react-dom/client';
// 导入redux-persist提供PersistGate组件
import { PersistGate } from 'redux-persist/integration/react';
// 导入React Redux 提供的Provider 组件
import { Provider } from 'react-redux';
import { store, persistor } from './store/index.js';
import App from './App.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
)
3.5 试验Redux
到这里就完成所有配置了，是不是迫不及待的想看下了效果呢，那我们开始写一下测试代码吧 我这里就在src/App.js文件中进行操作了，其它文件同理
React Redux为我们提供了的Hooks useSelector和useSelector其中useSelector 从 store state 中读取一个值，并且可以订阅和更新
useSelector 接收一个函数作为参数，函数中返回你需要的state更多使用方法请查看useSelector-示例 useDispatch 返回 store 的 dispatch 方法让你可以去 dispatch actions。
具体使用看如下案例：
import React, { useEffect } from 'react'
// 导入React Redux提供的Hooks
import { useDispatch, useSelector } from 'react-redux'
import { increment, decrement, fetchUsers, incrementByAmount } from '../store/modules/users'
export default function App(){
// 结构出 list
const { list, count } = useSelector(state => state.users)
const dispatch = useDispatch()
// 使用useEffect触发异步请求执行
useEffect(()=>{
dispatch(fetchUsers())
},[dispatch])
return (
当前users中count的值为：{count}
当前usersz中list的值为：{list}
- {item} )}
{list.map(item =>
)
}
到这里相信你也已经了解了，React Redux以及redux-persist的使用方式了，是不是很简单呢，接下来就可以开始你的业务代码了，如果本文对你有帮助，还请不要吝啬你的。
本文完~
参考文章
您阅读本篇文章共花了：
发表评论