Redux在React中的使用

本文介绍: 使用 useDi s patch 获取 dispatch 方法，提交对应的方法改变state的值。创建 store 文件夹，然后创建 index和对应的模块，如上图所示。使用 react–redux中Pro v ide r进行导入。文章以counterSt o re 命名，名字可自行取。使用 useSel e ct o r 获取 store中的数据。③编写 index.js。

Re dux在Re a ct中的使用

1.构建 方式

采用reduxjs/tool k i t+re a ct–redux的方式
 安装方式

npm install @reduxjs/toolkit react-redux

2.使用

①创建 目录

在这里插入图片描述
创建 store 文件夹，然后创建 index和对应的模块，如上图所示

②编写 counterSt o re.js

文章以counterSt o re命名，名字可自行取

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

import {configureStore} from "@reduxjs/toolkit"
import counterReducer from "./modules/counterStore";

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

④在根组件中导入
使用react–redux中Provider进行导入

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}&gt;
        <App /&gt;
    </Provider&gt;
);

⑤在组件中使用
使用useSel ector获取store中的数据

const ComponentDemo=()=&gt;{
    const {count}=useSelector(state =&gt; state.counter)
    return(
        <div&gt;
            {count}
        </div>
    )
}

export default ComponentDemo

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

const GrandSon=()=>{
    const dispatch=useDispatch()
    return(
        <div onClick={()=>{dispatch(decrement())}}>
            我是孙子组件
        </div>
    )
}