技术文献

https://www.bilibili.com/video/BV1vm4y137nu?vd_source=fae12232d35c765816697f45f45de337

语雀文档：

https://www.yuque.com/_h2o/vmv5lo/hg9kkacgzbtg4pwg#

安装 RTK
npm  create  vite@latest   (创建一个空项目)
npm  i   react-redux  @reduxjs/toolkit  

一、创建状态切片
创建 userSlice - src / store / user.js

创建切片4部曲

➀定义切片名称name:

➁定义切片状态的数据initialState:

➂定义修改数据的方法reducers:

➃导出actions和切片

import { createSlice } from "@reduxjs/toolkit";
const userSlice = createSlice({
   // 1.名称
   name: 'user-slice',  
   
   // 2.状态数据初始值
   initialState: {
       name: '张三',
       gender: '女',
       age: 18
   },
   
  // 3.操作方法
   reducers:{
       setName(state, action) {
           return {
             ...state,
             name: action.payload
           }
           //也可以取消return语句，直接简写：state.name = action.payload;
       },
       setGender(state, action) {
         return {
           ...state,
           gender: action.payload
         }
         //也可以取消return语句，直接简写：state.gender = action.payload;
       },
       setAge(state, action) {
         return {
           ...state,
           age: action.payload
         }
         //也可以取消return语句，直接简写：state.age = action.payload;
       }
   }
})

// 4.导出 action（必须） ：新手分两步写，老手分一步写：export const { setName, setGender, setAge } = userSlice.actions
const { setName, setGender, setAge } = userSlice.actions
export { setName, setGender, setAge }
export default userSlice.reduce

/*
    userSlice 中包含以下属性:
     actions
     caseReducers
     getInitialState
     name      当前切片的名称.它会被用来当作action.type的前缀
     reducer   调度: 根据不同的action, 调用caseReducers中相应的函数
*/

创建 goodsSlice - src / store / goods.js

import { createSlice } from "@reduxjs/toolkit";
const goodsSlice = createSlice({
   // 1.切换名称
   name: 'goods-slice',
   initialState:{
       name: '苹果',
       price: 100
   },
   reducers:{
       setName(state, action) {
           return {
             ...state,
             name: action.payload
           }
       },
       setPrice(state, action) {
           return {
             ...state,
             price: action.payload
           }
       }
   }
})
export const { setName, setPrice } = goodsSlice.actions
export default goodsSlice.reduce

二、合并切片
src / store / index.ts

import { configureStore } from "@reduxjs/toolkit";
import userSlice from './user'
import goodsSlice from './goods'
const store = configureStore({
   reducer: {
       user: userSlice.reducer,
       goods: goodsSlice.reducer 
   }
})
export default store

三、配置到全局
主入口文件. 全局使用 - src / main.jsx

...
import { Provider } from 'react-redux'
import store from './store/index'
const root = ReactDOM.createRoot(
 document.getElementById('root') as HTMLElement
)
root.render(
   <Provider store={store}>
     <App />
   </Provider>
)

四、使用与操作
其它组件中使用【不推荐】

import { useDispatch, useSelector } from "react-redux"
const ChildComponent = () => {
   const user = useSelector(state => state.user)
   const dispatch = useDispatch()
   return <>
       <h1>子组件 - { JSON.stringify(user) } </h1>
      <button onClick={ ()=> dispatch({type:'user-slice/setAge', payload:user.age+1}) }>
        加
      </button>
   </>
}
export default ChildComponent

扩展：使用 action 生成器【推荐】

import { useDispatch, useSelector } from "react-redux"
import userSlice from '@/store/user.js'
const { setAge } = userSlice.actions
const ChildComponent = () => {
   const user = useSelector(state => state.user)
   const dispatch = useDispatch()
   return <>
       <h1>子组件 - { JSON.stringify(user) } </h1>
      <button onClick={ ()=> dispatch( setAge(user.age+1) ) }>
        加
      </button>
   </>
}
export default ChildComponent