【17】基础知识：reduxjs/toolkit

一、Redux Toolkit 概念了解

Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式。

Redux Toolkit 最初是为了帮助解决有关 Redux 的三个常见问题而创建的：

"配置 Redux store 过于复杂"

"我必须添加很多软件包才能开始使用 Redux"

"Redux 有太多样板代码"
1
2
3
4
5

二、Redux Toolkit 使用

1、安装

# NPM
npm install @reduxjs/toolkit  react-redux

# Yarn
yarn add @reduxjs/toolkit  react-redux
1
2
3
4
5

2、创建 store

src/store/index.js

// 使用 RTK 来构建 store
import { configureStore } from '@reduxjs/toolkit'
import studentReducer from './slicers/studentSlice'

// 创建 store 用来创建store对象，需要一个配置对象作为参数
const store = configureStore({
    // 用来配置 store 中用到的 reducer
    reducer: {
        student: studentReducer
    }
})

export default store
1
2
3
4
5
6
7
8
9
10
11
12
13

3、根组件配置 store

入口 index.js 文件

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>
)
1
2
3
4
5
6
7
8
9
10
11

4、createSlice 创建 reducer 的切片

src/store/slicers/studentSlice.js

// 它需要一个配置对象作为参数，通过对象的不同的属性来指定它的配置
import { createSlice } from '@reduxjs/toolkit'

// state的初始值
const initialState = { 
	name: '莉莉',
	info: {
		sex: '男'，
		age: 18
	}
}

export const studentSlice = createSlice({
    name: 'stu', // 命名空间，用来自动生成action中的type，name值会成为前缀；保证唯一，不重名
    initialState,
    reducers: { // 指定state的各种操作，直接在对象中添加方法
		// 可以通过不同的方法来指定对state的不同操作
		// 两个参数：state代理对象，可以直接修改；action操作的信息
        setName(state, action) {
            state.name = action.payload
        },
        setInfo(state, action) {
            state.info = action.payload
        }
    }
})

// 切片对象会【自动】的帮助我们生成action；切片对象存在属性actions
// actions中存储的是slice自动生成action创建器（函数），调用函数后会自动创建action对象
// action对象的结构 {type:name/函数名, payload:函数的参数}
export const { setName, setInfo } = studentSlice.actions
// const nameAction = setName('哈哈') // { type: 'stu/setName', payload: '哈哈'}
// const infoAction = setInfo({sex:'女',age:18}) // { type: 'stu/setInfo', payload: {sex:'女',age:18}}

// 简化useSelector使用，student来源于store里面配置的reducer
export const selectName = state => state.student.name
export const selectInfo = state => state.student.info

// 导出reducer在store里面使用
export default studentSlice.reducer
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

5、页面使用

useDispatch() 用来获取派发器对象
useSelector() 用来加载 state 中的数据

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { setName, setInfo, selectName, selectInfo } from './store/slicers/studentSlice'

const App = () => {
	// 获取student中的name值
    // const name = useSelector(state => state.student.name)
    
    // 简化写法
    const name = useSelector(selectName) 
    const info = useSelector(selectInfo)

    const dispatch = useDispatch()
    
    const setNameHandler = () => {
        dispatch(setName('哈哈'))
    }

    const setInfoHandler = () => {
        dispatch(setInfo({sex: '女', age: 18}))
    }

    return (
        <div>
            <p>
                {name} ---
                {info.sex} ---
                {info.age} ---
            </p>
            <button onClick={setNameHandler}>修改name</button>
            <button onClick={setInfoHandler}>修改info</button>
        </div>
    )
}

export default App
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

三、redux-persist 持久化储存

在实际开发中，如果用户刷新了网页，那么我们通过 redux 存储的全局数据就会丢失，比如登录信息。可以通过 localStorage 将信息存储到本地，需要自己添加逻辑（了解）。

通过 redux-persist 实现持久化储存，使用过程：

1、 安装

npm install redux-persist
1

2、配置 store

import { configureStore } from '@reduxjs/toolkit'
import { combineReducers } from 'redux'
// 配置数据的持久化效果
import { persistStore, persistReducer} from 'redux-persist'
// 导入需要配置的数据源，可选storage、cookie、session等
import storage from 'redux-persist/lib/storage'
// import storageSession from 'redux-persist/lib/storage/session'
import userReducer from '@/store/slicers/userSlice'
import menuReducer from '@/store/slicers/menuSlice'

// 合并多个模块
const reducers = combineReducers({
	user: userReducer,
	menu: menuReducer
})

// 配置持久化设置
const persistConfig = {
    key: 'root',
    storage, // 持久化存储引擎
    // 可选的配置项，如白名单、黑名单等 选其一
    // blacklist: ['不想缓存的状态的名字'],
    // whitelist: ['想要缓存状态的名字']  
}

// 创建持久化的配置persist的信息
const persistedReducer = persistReducer(persistConfig, reducers)

// 创建存储对象并且抛出对象
export const store = configureStore({
	reducer: persistedReducer
})

// 使用persistStore包裹并抛出
export const persistor = persistStore(store) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

3、index.js入口文件中配置

在入口文件中使用 PersistGate 包裹根组件，这将延迟渲染 app 视图直到持久化状态取回并保存到 redux 中。

将 store 提供给应用程序，persistor对象提供给根组件

import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
// 导入redux中对应抛出的store对象和persistor对象
import { store, persistor } from '@/store'
// 如果使用React，则使用 PersistGate 包裹根组建
import { PersistGate } from 'redux-persist/lib/integration/react'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
    <Provider store={store}>
    	<PersistGate loading={null} persistor={persistor}>
    		<App />
    	</PersistGate>
    </Provider>
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16