React使用Redux

Redux

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

安装

bash 复制代码
npm i @reduxjs/toolkit react-redux

创建目录

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

编写状态管理类

javascript 复制代码
// 导入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

javascript 复制代码
import {configureStore} from "@reduxjs/toolkit";
import countReducer from "./modules/countStore.js";

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

export default store

使用Redux

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

javascript 复制代码
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>
)

在组件中使用

javascript 复制代码
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
相关推荐
dualven_in_csdn1 小时前
搞了两天的win7批处理脚本问题
java·linux·前端
你的人类朋友1 小时前
✍️【Node.js程序员】的数据库【索引优化】指南
前端·javascript·后端
小超爱编程2 小时前
纯前端做图片压缩
开发语言·前端·javascript
银色的白2 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
应巅2 小时前
echarts 数据大屏(无UI设计 极简洁版)
前端·ui·echarts
萌萌哒草头将军3 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
Jimmy3 小时前
CSS 实现描边文字效果
前端·css·html
islandzzzz3 小时前
HMTL+CSS+JS-新手小白循序渐进案例入门
前端·javascript·css·html
Senar3 小时前
网页中如何判断用户是否处于闲置状态
前端·javascript
很甜的西瓜4 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas