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
相关推荐
crary,记忆42 分钟前
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
前端·webpack·angular·angular.js
漂流瓶jz1 小时前
让数据"流动"起来!Node.js实现流式渲染/流式传输与背后的HTTP原理
前端·javascript·node.js
SamHou02 小时前
手把手 CSS 盒子模型——从零开始的奶奶级 Web 开发教程2
前端·css·web
我不吃饼干2 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大2 小时前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu2 小时前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端2 小时前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao3 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫3 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z3 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js