一、安装Redux Toolkit 和 React-Redux
注： “@reduxjs/toolkit”: “^1.8.6”, “react-redux”: “^8.0.4”
npm install @reduxjs/toolkit react-redux
二、创建Redux Store
从Redux Toolkit里引入configureStore，我们将从创建和导出一个空的Redux store开始。
store/index.js
// 使用rtk来创建store
import {
configureStore } from '@reduxjs/toolkit'
import useReducer from './userSlice'
/*
使用rtk的时候，reducer依然可以使用之前的创建不变
但是不再需要去合并reducer combineReducers
rtk提供了configureStore方法，直接接收一个对象作为参数
可以将reducer的相关配置直接通过这个对象进行传递，不再需单独合并reducer
reducer属性可以直接单独传递一个ruducer,也可以传递一个对象
*/
const store = configureStore({
reducer: {
user: useReducer
}
})
export default store
三、在React中使用Redux Store
我们就可以在src/index.js文件中用React-Redux提供的包裹我们的应用，这样我们就可以在React组件中使用React store了
具体操作就是先引入我们刚刚创建的Redux store，然后用包裹你的，再将store作为一个prop传入。
src/index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import {
Provider } from 'react-redux'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<Provider store={
store}>
<App />
</Provider>
)
四、创建一个Redux State Slice
slice需要一个name作为唯一标识，需要有初始化state值，还需要至少一个reducer方法来定义state如何变化。一旦slice创建完成我们就可以导出生成的Redux action creators和整个slice的reducer方法。
Redux需要我们通过制作数据副本和更新副本来不可变地更新state。然而Redux Toolkit的createSlice 和 createReducer API内部使用了Immer，这允许我们可以直接写更新逻辑，不必制作副本，它将自动成为正确的不可变更新。
userSlice.js文件
// 切片对象
import {
createSlice } from '@reduxjs/toolkit'
/*
reducer切片
createSlice函数的作用：生成分片的reducer
内部调用的市createAction和createReducer
creatSlice可以帮助我们用更少的代码去生成配套的reducer和action,而且有很好的维护性
*/
const userSlice = createSlice({
name: 'zhangsan', // 标识符，生成actions的时候要使用，
// state初始值
initialState: {
name: '张三',
age: 18,
gender: '男'
} ,
// reducer的具体方法，
reducers: {
// 指定state的各种操作，直接就可以在对象中添加方法
setName(state, action) {
/*
可以通过不同的方法修来指定对state的不同的操作
state，action
可以直接修改state => state 是一个代理对象 之前的复制一份，返回一个新的对象
*/
state.name = action.payload
},
setAge(state, action) {
state.age = action.payload
}
}
})
/*
切片对象会自动地帮助我们生成action
切片对象会根据我们地reducers方法来自动地创建action对象，这些action对象会保存到切片对象的actions中
{type:name/函数名，payload:函数的参数}
*/
// 实际开发中，setName，setAge对外暴露，
export const {
setName, setAge } = userSlice.actions
export default userSlice.reducer
五、在React组件中使用Redux State和Action
现在我们可以使用React-Redux钩子在React组件中操作Redux store。我们可以使用useSelector从store中读取数据，也可以使用useDispatch来dispatch actions。
src/App.js
import React from 'react'
import {
useSelector, useDispatch } from 'react-redux'
import {
setName, setAge } from './store/userSlice'
export default function App() {
const user = useSelector(state => state.user)
const dispatch = useDispatch()
const setNameHandler = () => {
dispatch(setName('李四'))
}
const setAgeHandler = () => {
dispatch(setAge(20))
}
return (
<div>
<h1>{
user.name}</h1>
<h1>{
user.age}</h1>
<h1>{
user.gender}</h1>
<button onClick={
setNameHandler}>修改name</button>
<button onClick={
setAgeHandler}>修改年龄</button>
</div>
)
}
以上是关于如何在React中设置和使用 Redux Toolkit的简要概述。回顾细节：
1、使用configureStore创建一个Redux Store
configureStore接收reducer方法作为命名参数，或者说作为reducer对象的属性
configureStore会使用默认设置自动设置好store
2、在React组件中使用 Redux store
- 用React-Redux提供的 包裹你的
- 使用 传入Redux store
3、使用createSlice创建Redux “slice” reducer
- createSlice需要有name属性作为唯一标识，还需要初始化state和已命名的reducer方法
- Reducer方法通过使用Immer可以直接“改变”state，而不必手动做副本
- 导出生成的slice reducer 和 action creators
4、在React组件中使用React-Redux的useSelector/useDispatch钩子
- 使用useSelector钩子从store中读数据
- 使用useDispatch钩子获取到dispatch方法，并且根据需要dispatch actions