二、使用RTK管理redux

1、安装

npm install react-redux @reduxjs/toolkit -S

2、创建store仓库

// store/index
import {configureStore} from "@reduxjs/toolkit";

//创建store
const store=configureStore({
    reducer:{
        // student:stuSlice.reducer
    }
})

export default store

3、创建数据切片

//store/studentSlice.js
import {createSlice} from "@reduxjs/toolkit"

//createSlice创建reducer的切片
//它需要一个配置对象作为参数，通过对象的不同的属性来指定它的配置
const studentSlice=createSlice({
    name:"stu",//用来自动生成action中的type
    initialState:{
        name:"孙悟空",
        age:18,
        gender:"男"，
        address:"花果山"
    },//state的初始值
    reducers:{
		setName(state,action){
            //通过不同的方法来指定对state的不同操作
            //俩个参数：state 这个state是个代理对象，可以直接修改 不需要...state浅复制，直接修改
            state.name="猪八戒"
        },
        setAge(state,action){
            state.age=19
        }
    }
})

//切片对象会自动的生成action
//actions中存储的是slice自动生成的action创建器（函数），调用函数后会自动创建action对象
export const {reducer:studentReducers}=studentSlice
export const {setName} = studentSlice.actions

在store里引用

import {configureStore} from "@reduxjs/toolkit";
import {studentReducers} from "./studentSlice";

const store = configureStore({
    // 这是所有的reducer
    reducer: {
        student: studentReducers
    }
})

export default store

4、项目使用

• 挂载

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

root.render(
	<Provider store={store}>
		<App/>
	</Provider>
)

• 组件使用

//app.js
import {useDispatch, useSelector} from "react-redux";
//取别名，不然容易重名
import {setName as setStudentName} from "./store/studentSlice";

const App = () => {

    // 加载store的数据
    const student=useSelector(state=>state.student)
    // 实例化一个dispacth
    const dispacth=useDispatch()

    // 改名字
    const modfiyName=()=>{
        dispacth(setStudentName("黄达全"))
    } 
     return (
       <div>
           <span>{student.name}---</span>
      </div>
     )
  }