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
相关推荐
小约翰仓鼠8 分钟前
vue3子组件获取并修改父组件的值
前端·javascript·vue.js
Lin Hsüeh-ch'in10 分钟前
Vue 学习路线图(从零到实战)
前端·vue.js·学习
烛阴26 分钟前
bignumber.js深度解析:驾驭任意精度计算的终极武器
前端·javascript·后端
计蒙不吃鱼33 分钟前
一篇文章实现Android图片拼接并保存至相册
android·java·前端
全职计算机毕业设计1 小时前
基于Java Web的校园失物招领平台设计与实现
java·开发语言·前端
啊~哈1 小时前
vue3+elementplus表格表头加图标及文字提示
前端·javascript·vue.js
小小小小宇2 小时前
前端小tips
前端
小小小小宇2 小时前
二维数组按顺时针螺旋顺序
前端
安木夕2 小时前
C#-Visual Studio宇宙第一IDE使用实践
前端·c#·.net
努力敲代码呀~2 小时前
前端高频面试题2:浏览器/计算机网络
前端·计算机网络·html