Redux-2-CSDN博客

本文链接：https://blog.csdn.net/A6516565189/article/details/149322623

这篇博客接上篇redux，属于是继续熟悉redux的用法，可能之前那篇忘记了，现在画个图再回顾一下。

应该是非常清晰了。就是用createSlice一条龙创建action,initalState,reducers。然后用.actions创建action,用.reducer绑定到store。然后创建store。去入口文件引入Provider然后store={store}全局访问store。然后所有组件就可以使用了。useSelector直接获取state数据useDispatch直接访问那些加工数据的reducer。

//使用RTK构建store
import { configureStore, createSlice } from '@reduxjs/toolkit'
//创建reducer切片
//需要一个配置对象作为参数 通过对象的不同属性来指定配置信息
const stuSlice = createSlice({
    name: 'stu',//   用来自带生成action的type属性
    initialState: {
        name: '孙误解',
        age: 18,
        gender: '男',
        address: '傲来国'
    },//state的初始值
    reducers: {//指定操作state方式 直接在对象中添加方法
        setName(state, action) {
            //通过不同方法指定对state的不同方法
            //这里面的参数state 这个是代理对象，可以直接修改。
            //RTK会帮我判断更新
            state.name = action.payload;
        },
        setAge(state, action) {
            state.age = action.payload
        }
    }
})
const schoolSlice = createSlice({
    name: 'school',
    initialState: {
        name: '花果山小学',
        address: '花果山街道'
    },
    reducers: {
        setName(state, action) {
            state.name = action.payload
        },
        setAddress(state, action) {
            state.address = action.payload
        }
    }

})
//切片对象创建完了会自动生成action
// console.log('stuSlice.actions', stuSlice.actions)
//actions存储的是slice自动生成的action创建器（函数）调用后自动创建action对象
//action对象的结构{type:name/函数名,payload函数的参数}
export const { setName, setAge } = stuSlice.actions
//导出action创建器
export const { school }
const nameAction = setName('哈哈')
const setAction = setAge('嘻嘻')
console.log('nameAction', nameAction)
console.log('setAction', setAction)
// console.log('setName', setName)
// console.log('setAge', setAge)
//创建store用来创建store对象，需要配置一个对象作为参数
const store = configureStore({
    reducer: {
        student: stuSlice.reducer
    }
})
export default store

1.拆分代码

这里只是一个studentSlice切片，但是如果说我们有多个呢？那么我们就需要去放在单独的文件夹里面了，便于维护。比如我们希望再来一个schoolSlice那么两个了就需要去创建两个文件去单独放置Slice切片。

这是文件目录

这是StudentSlice切片

这是schoolSlice切片文件、

这是store文件

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { setName, setAge } from './store/StuSlice'
import { setName as setSchoolName, setAddress } from './store/schoolSlice'
export default function App() {
    //useSelector()用来加载state数据
    const student = useSelector((state) => state.student)
    const school = useSelector((state) => state.school)
    // const { student, school } = useSelector((state) => state)
    //通过useDispatch（）获取派发器对象
    const dispatch = useDispatch()
    //获取action构建器

    const handle = () => {
        dispatch(setName('shabi'))
    }
    const ageHandle = () => {
        dispatch(setAge(22))
    }
    return (
        <div>
            <p>
                {student.name}--
                {student.age}--
                {student.gender}--
                {student.address}--
            </p>
            <button onClick={handle}>修改name</button>
            <button onClick={ageHandle}>修改age</button>
            <hr />
            <p>
                {school.name}-------{school.address}
            </p>
            <button onClick={() => { dispatch(setSchoolName('高老庄一中')) }}>修改学校名字</button>
            <button onClick={() => { dispatch(setAddress('高老庄')) }}>修改地址</button>
        </div>
    )
}

这是我们的组件。效果如图。