Redux基础使用教程

安装 redux 插件

pnpm add react-redux @reduxjs/toolkit

开发

1.创建仓储文件夹 stores

在 src 文件下，创建仓储文件夹 stores

2.创建切片文件 createSlice，可多个

如，user.js

用户切片userSlice.js

import { createSlice } from '@reduxjs/toolkit'
import { USERSLICE } from './constant'
const userSlice = createSlice({
  name: USERSLICE,
  initialState: {
    age: 1,
  },
  reducers: {
    setAge: (state, action) => {
      state.age = action.payload
    },
  },
})
export default userSlice

3.合并切片文件 configureStore

创建文件 index.js

import { configureStore } from '@reduxjs/toolkit'
import userSlice from './user'
const store = configureStore({
  reducer: {
    user: userSlice.reducer,
  },
})

export default store

4. 提供状态数据 Provider

Provider 提供者

import { Provider } from 'react-redux'
;<Provider store={stores}>
  <App />
</Provider>

5.在其他组件中，获得数据 useSelector

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

function Test() {
  // 获得状态数据
  const user = useSelector((state) => state.user)
  const dispatch = useDispatch()
  // 更新状态数据
  return (
    <>
      <div>Test</div>
      <div style={{ padding: '16px', textAlign: 'center' }}>
        <p>{user.age}</p>
        <p>
          <button
            onClick={() => {
              dispatch({ type: 'user-slice/setAge', payload: user.age + 1 })
            }}>
            +1
          </button>
          <button
            onClick={() => {
              dispatch({ type: 'user-slice/setAge', payload: user.age - 1 })
            }}>
            -1
          </button>
        </p>
      </div>
    </>
  )
}
export default Test

6.在其他组件中，更新数据 useDispatch

通过 dispatch 发送 action 动作

import { useSelector, useDispatch } from 'react-redux'
import userSlice from '../stores/user'

// action 生成器
const { setAge } = userSlice.actions

function Test() {
  // 获得状态数据
  const user = useSelector((state) => state.user)
  // 更新状态数据
  const dispatch = useDispatch()
  return (
    <>
      <div>Test</div>
      <div style={{ padding: '16px', textAlign: 'center' }}>
        <p>{user.age}</p>
        <p>
          <button
            onClick={() => {
              dispatch(setAge(user.age + 1))
            }}>
            +1
          </button>
          <button
            onClick={() => {
              dispatch({ type: 'user-slice/setAge', payload: user.age - 1 })
            }}>
            -1
          </button>
        </p>
      </div>
    </>
  )
}

export default Test

在切片文件中，新数据替换旧数据、

在 reduxjs/toolkit 新版本中已经包含了 Immer ，所以不用再解构赋值复制一份在赋值，可以直接赋值。其他交给 RTK 处理。

reducers: {
  setAge: (state, action) => {
    state.age = action.payload
  }
}

动作生成器

// 引入切片
import userSlice from '../stores/user'
// action 生成器
const { setAge } = userSlice.actions
// 等价于 setAge === {type:'user-slice/setAge',payload:新值}