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
相关推荐
brzhang3 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止4 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms4 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登4 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in4 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4166 小时前
HTML面试题
前端·html
张可6 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课6 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登7 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
蓝婷儿7 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl