Redux（@reduxjs/toolkit react-redux）

一、安装

// npm
npm i @reduxjs/toolkit react-redux 

// yarn
yarn add @reduxjs/toolkit react-redux 

二、基本使用

1. 在 src 目录下创建 store/index 文件

// store/index.js
import { configureStore } from '@reduxjs/toolkit'

// 通过 configureStore 创建 store
const store = configureStore({
  // 传入 reducer
  reducer: {},
})

export default store

2. 在 main.jsx 中，使用 Provider 组件 传递 store 给组件

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux' // 导入 Provider
import store from './store/index.js' // 导入 store
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    {/* 使用 Provider 传递 store 给组件 */}
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

3. 创建 slices(module)

在 store 目录下创建一个 slices 的文件夹，用来存储每一个 切片
在这里我们创建一个 counter 的 slice

// counter.js
import { createSlice } from '@reduxjs/toolkit'

// 初始化狀態
const initialState = {
  counter: 0,
}

// 创建 slice
const counterSlice = createSlice({
  name: 'counter', // slice 的名稱
  initialState, // 初始化狀態
  // 挂载方法 actions
  reducers: {
    // 对 state.counter 进行 +1 操作
    increment: (state) => {
      state.counter += 1
    },

    // 对 state.counter 进行 -1 操作
    decrement: (state) => {
      state.counter -= 1
    },
  },
})

// 导出 actions
export const { increment, decrement } = counterSlice.actions
// 导出 reducer
export default counterSlice.reducer

这样我们就创建好一个 counter 的 切片了

4.在页面中使用

在 src 目录下的 App.jsx(或 App.js)文件

// App.jsx(或 App.js)
import { Button } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './store/slices/counterSlice'

function App() {
  // useSelector 用于从 store 中获取数据
  const counter = useSelector((state) => state.counter.counter)

  // useDispatch 用于获取 dispatch 函数，用于派发 action
  const dispatch = useDispatch()

  return (
    <>
      <section>
        <p>App - {counter}</p>
        <div>
          {/* 使用 dispatch 派发增减 counter 的事件 */}
          <Button onClick={(e) => dispatch(decrement())}>- 1</Button>
          <Button onClick={(e) => dispatch(increment())}>+ 1</Button>
        </div>
      </section>
    </>
  )
}

export default App

下面我们来看一下效果