redux-redux toolkit-状态管理

掘金链接：https://juejin.cn/post/7101688098781659172

1
2

# 1.redux介绍

Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。它包含我们对于构建 Redux 应用程序必不可少的包和函数。 Redux Toolkit 的构建简化了大多数 Redux 任务，防止了常见错误，并使编写 Redux 应用程序变得更加容易。可以说 Redux Toolkit 就是目前 Redux 的最佳实践方式

官网：https://cn.redux.js.org/introduction/getting-started/

# 2.安装

yarn add @reduxjs/toolkit react-redux
或 
npm i @reduxjs/toolkit react-redux

1
2
3

# 3.创建仓库

创建仓库主模块 src/store/index.js (初始化仓库并导入子模块)

创建子模块 src/store/modules/userSlice.js（定义数据并写好修改数据的方法），暴露该模块的方法和数据

在整个程序的入口文件最顶级dom之上注入store仓库

src/store/modules/userSlice.js

import {createSlice} from '@reduxjs/toolkit'

// 定义一个store 对象
const userSlice = createSlice({
    // 模块名
    name:'user',
    // 数据定义
    initialState:{
        users:[{name:'张三',age:40}],
    },

    // 操作数据方法
    reducers:{
        //获取数据并解构使用 payload
        add(state,{payload}){
            state.users.push(payload)
        }
    }

})

// 暴露操作数据的方法
export const {add} = userSlice.actions;

// 暴露子模块 实现主模块导入该模块
export default userSlice.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

src/store/index.js

import { configureStore } from "@reduxjs/toolkit";
import  userSlice  from "./modules/userSlice";
import numSlice from "./modules/numSlice";
//configureStore创建一个redux数据实例
const store = configureStore({
  // 合并多个Slice
  reducer: {
    userSlice: userSlice,
    numSlice:numSlice
  },
});

// 暴露实例对象
export default store;

1
2
3
4
5
6
7
8
9
10
11
12
13
14

main.jsx

顶部组件向全局注入一个 store仓库

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
// 全局注入store  redux toolkit
import {Provider} from 'react-redux'
import store from './store/index'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* 全局注入store */}
    <Provider store={store}>
        <App />
    </Provider>
  </React.StrictMode>,
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 4.使用变量和方法

使用 react-redux.useSelector() hook 获取state数据

使用 react-redux.useDispatch() hook 派发事件与提交数据

import {useSelector,useDispatch} from 'react-redux'   

//获取数据
const {users} = useSelector(store=>store.userSlice)

1
2
3
4

// 导入hooks
import {useSelector,useDispatch} from 'react-redux'
// 导入修改数据方法
import {add} from '../../store/modules/userSlice'

//派发一个修改数据方法 并完成修改
 dispatch(add({name:'张麻子',age:40}))

1
2
3
4
5
6
7

编辑

← react路由 axios核心重写→