Redux在React中的使用

Redux在React中的使用

1.构建方式

采用reduxjs/toolkit +react-redux 的方式

安装方式

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

2.使用

①创建目录

创建store文件夹,然后创建index和对应的模块,如上图所示

②编写counterStore.js

文章以counterStore命名,名字可自行取

javascript 复制代码
import {createSlice} from '@reduxjs/toolkit'
const counterStore=createSlice({
    name:'counter',
    //初始化状态数据
    initialState:{
        count:0
    },
    reducers:{
        increment(state){
            state.count++
        },
        decrement(state){
            state.count--
        },
        setCountData(state,action){
            state.count=action.payload
        }
    }
})
//解构出创建action对象的函数
const {increment,decrement,setCountData}=counterStore.actions
//获取reducer函数
const counterReducer=counterStore.reducer
export {increment,decrement,setCountData}
export default counterReducer

③编写index.js

javascript 复制代码
import {configureStore} from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore";

//创建根store组合子模块
const store=configureStore({
    reducer:{
        counter:counterReducer
    }
})
export default store

④在根组件中导入

使用react-redux中Provider进行导入

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import store from "./store";
import {Provider} from "react-redux";

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

⑤在组件中使用

使用useSelector获取store中的数据

javascript 复制代码
const ComponentDemo=()=>{
    const {count}=useSelector(state => state.counter)
    return(
        <div>
            {count}
        </div>
    )
}

export default ComponentDemo

使用useDispatch获取dispatch方法,提交对应的方法改变state的值

javascript 复制代码
const GrandSon=()=>{
    const dispatch=useDispatch()
    return(
        <div onClick={()=>{dispatch(decrement())}}>
            我是孙子组件
        </div>
    )
}
相关推荐
FinGet5 小时前
那总结下来,react就是落后了
前端·react.js
王解8 小时前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
少恭写代码13 小时前
duxapp放弃了redux,在duxapp中局部、全局状态的实现方案
react native·taro·redux·duxapp
AIoT科技物语1 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情1 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router
番茄小酱0011 天前
ReactNative中实现图片保存到手机相册
react native·react.js·智能手机
王解1 天前
Jest进阶知识:深入测试 React Hooks-确保自定义逻辑的可靠性
前端·javascript·react.js·typescript·单元测试·前端框架
小牛itbull1 天前
ReactPress—基于React的免费开源博客&CMS内容管理系统
前端·react.js·开源·reactpress
~甲壳虫1 天前
react中得类组件和函数组件有啥区别,怎么理解这两个函数
前端·react.js·前端框架
用户8185216881172 天前
react项目搭建create-router-dom,redux详细解说
react.js