目录
Redux Tool官网：Redux - A JS library for predictable and maintainable global state management | Redux
一、安装依赖
NPM
npm install react-redux @reduxjs/toolkit -S
Yarn
yarn add react-redux @reduxjs/toolkit
react-redux为redux的核心包，toolkit为redux的工具包。
二、创建redux仓库的目录结构
1、在src目录下创建store目录
在store目录下创建对应的redux仓库。
2、在store目录下创建slices目录
slices目录用于存放不同的slice。
3、最终目录结构如下：
三、createSlice
import {createSlice} from "@reduxjs/toolkit";
const userSlice = createSlice ({
name: "user", //用来自动生成action中的type
initialState: {
name: "Jack",
age: 18,
sex: 1,
address: "US"
}, // state的初始值
reducers: { // 指定state的各种操作，直接在对象中添加方法
setName(state, action) {
// 可以通过不同的方法，来指定对state不同的操作
// 两个参数： state 这是state的一个代理对象，可以直接修改
state.name = "诛八界"
},
setAge(state, action) {
state.age = action.payload
}
}
})
// 切片对象会自动地帮我们生成action
// action中的存储的slice自动生成action创建器（函数），调用函数后会自动创建action对象
// action对象结构：{type:name/函数名,payload:函数的参数}
const {setName, setAge} = userSlice.actions;
const nameAction = setName("哈哈")
const ageAction = setAge(30)
console.log(nameAction)
console.log(ageAction)
打印：
Slice一般这样书写到一个单独的文件里：
javascript
import {createSlice} from "@reduxjs/toolkit";
const userSlice = createSlice({
name: "user", //用来自动生成action中的type
initialState: {
name: "Jack",
age: 18,
sex: 1,
address: "US"
}, // state的初始值
reducers: { // 指定state的各种操作，直接在对象中添加方法
setName(state, action) {
// 可以通过不同的方法，来指定对state不同的操作
// 两个参数： state 这是state的一个代理对象，可以直接修改
state.name = "诛八界"
},
setAge(state, action) {
state.age = action.payload
}
}
})
// 切片对象会自动地帮我们生成action
// action中的存储的slice自动生成action创建器（函数），调用函数后会自动创建action对象
// action对象结构：{type:name/函数名,payload:函数的参数}
export const {setName, setAge} = userSlice.actions;
export default userSlice;四、configureStore
configureStore用于创建Redux集中管理仓库。
在store的index文件下书写如下：
javascript
import {configureStore} from "@reduxjs/toolkit";
import userSlice from "./slices/userSlice";
const store = configureStore({
reducer: {
userData: userSlice.reducer
// config: configSlice.reducer
}
})
export default store;五、配置全局仓库标签
引入redux里的Provider标签，使用Provider标签来包裹软件根标签。
javascript
import {Provider} from "react-redux";
import store from "./store";
<Provider store={store}>
<App/>
</Provider>六、useSelector
useSelector用来加载state中的数据，
javascript
import React from "react";
import {useSelector} from "react-redux";
function App() {
//useSelector用于加载state中的数据
// 注意: state.reducer的名称而不是slice的name
const user = useSelector(state => state.userData)
return (
<>
<div className="App">
{JSON.stringify(user)}
</div>
</>
);
}页面效果：state中的值被读取到了。
对于需要使用多个state里reducer的情况，可以像以下简写：
const {user,config} = useSelector(state => state) //直接解构获取
七、useDispatch
通过userDispatch钩子函数获取派发器对象。
javascript
import {useDispatch, useSelector} from "react-redux";
import {setAge, setName} from "./store/slices/userSlice";
function App() {
const user = useSelector(state => state.userData)
// 通过userDispatch()获取派发器对象。
const dispatch = useDispatch()
const changeUser = () => {
dispatch(setName())
dispatch(setAge(22))
}
return (
<>
<div className="App">
{JSON.stringify(user)}
<button onClick={changeUser}>修改</button>
</div>
</>
);
}点击修改后页面state发生改变了：dispatch(action函数(payload参数))
甚至你这样写依然可以正常执行：
dispatch({type:"user/setAge",payload:22}) //但不推荐这样写，容易写错参数
总结到此！