前端框架 Redux tool RTK 总结

目录

一、安装依赖

二、创建redux仓库的目录结构

三、createSlice

四、configureStore

五、配置全局仓库标签

六、useSelector

七、useDispatch

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一般这样书写到一个单独的文件里：

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文件下书写如下：

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标签来包裹软件根标签。

import {Provider} from "react-redux";
import store from "./store";

<Provider store={store}>
        <App/>
</Provider>

六、useSelector

useSelector用来加载state中的数据，

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钩子函数获取派发器对象。

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}) //但不推荐这样写，容易写错参数

总结到此！