React使用Redux

Redux

Redux 是一个用于 JavaScript 应用的状态容器,Redux 的核心思想是将应用程序的所有状态存储在一个单一的、全局的 store 中，并提供了一套规则来确保状态以一种可预测的方式进行变更.

安装

npm i @reduxjs/toolkit react-redux

创建目录

创建store文件夹，在文件夹下创建index.js（注册文件）和modules以及他下面的countStore.js(状态文件)

编写状态管理类

// 导入createSlice函数，用于创建Redux状态管理中的slice
import {createSlice} from "@reduxjs/toolkit";

// 创建一个名为"counter"的slice，用于管理计数器的状态
const countStore = createSlice(
    {
        // 定义slice的名称
        name:"counter",
        // 定义初始状态，计数器的初始值为0
        initialState: {
            count:0
        },
        // 定义 reducer 函数，用于处理状态变化
        reducers:{
            // 增加计数器的值
            increment:(state,action)=>{
                // 将传入的值加到当前计数器上
                state.count+=action.payload
            },
            // 减少计数器的值
            decrement:(state)=>{
                // 当前计数器值减1
                state.count-=1
            }
        }
    }
)

// 从生成的actions中解构出increment和decrement
const {increment,decrement} = countStore.actions
// 获取slice的reducer函数
const countReducer = countStore.reducer
// 导出increment和decrement动作，供外部调用
export {increment,decrement}
// 导出reducer函数，供Redux store使用
export default countReducer

注册store

import {configureStore} from "@reduxjs/toolkit";
import countReducer from "./modules/countStore.js";

const store = configureStore({
    reducer:{
        counter:countReducer
    }
})

export default store

使用Redux

修改main.jsx,将redux挂载到组件中

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.jsx'
import store from "./store/index.js";
import { Provider } from "react-redux";

createRoot(document.getElementById('root')).render(
  <StrictMode>
      <Provider store={store}>
          <App />
      </Provider>
  </StrictMode>
)

在组件中使用

import {useDispatch, useSelector} from "react-redux";
import {increment,decrement} from './store/modules/countStore.js'
function App() {
    const { count } = useSelector(state => state.counter)
    const dispatch = useDispatch();
   return (
       <div>
           <div>
               <h3>{count}</h3>
               <button onClick={() => dispatch(increment(1))}>+</button>
               <button onClick={() => dispatch(increment(10))}>+10</button>
               <button onClick={() => dispatch(decrement())}>-</button>
           </div>
       </div>
   )
}

export default App