Redux的使用方式

安装配置

npm i @reduxjs/toolkit
npm i react-redux

文件目录

在src的目录下创建一个store文件夹，其中包含一个modules文件夹，和一个index.js的文件，modules文件夹下包含一个count.js的文件

count.js中的代码

import { createSlice } from "@reduxjs/toolkit";
let countslice = createSlice({
    name:'counter',
    initialState: {
        // 状态属性
    },
    reducers:{
        // 方法
    },
})
export let { 方法名 } = countslice.actions;
export default countslice;

这些是在count.js中比较固定的一些配置，在initialState中来定义我们所需要的属性，在reducers中定义我们需要的方法

index.js中的代码

import { configureStore } from "@reduxjs/toolkit";
import countslice from "./modules/count";
let store = configureStore({
  reducer: {
    countslice: countslice.reducer,
  },
});
export default store;

通过这段代码，我们可以创建一个Redux store，并将countslice模块的状态和操作集成到这个store中。其他组件可以通过连接到这个store，来访问和更新countslice模块的状态。

路由中的配置

首先需要在src文件夹下的index.js中引入react-redux中的Provider，和modules文件夹下的index文件

import { Provider } from "react-redux";
import store from "./store/index";

然后让Provider标签包裹整个路由，确保所有的组件都可以访问到Redux的状态

<Provider store={store}>
    <RouterProvider router={router}></RouterProvider>
  </Provider>

Provider中有一个store，store的作用就是将整个应用程序的逻辑和状态

如何访问Redux中的状态属性

首先需要在modules文件夹下的count.js文件中的initialState中定义一个list

initialState: {
    list: ['Hallo word']
  },

定义完成后，在我们需要访问的组件中引入react-redux中的useSelector方法

import { useSelector } from "react-redux";

之后进行赋值操作

let list = useSelector(state => state.countslice.list);

最后就可以直接访问到我们的list了

如何访问Redux中的方法

首先要在我们的reducers中定义我们的方法并暴露

reducers: {
   log(){
    console.log('111');
   }
  },
export let { log } = countslice.actions;

然后在我们需要使用这个方法的组件中导入这个方法，和useDispatch

import { useDispatch } from "react-redux";
import {log} from './store/modules/count'

然后将useDispatch命名为dispatch，并定义一个新的方法名来进行定义

let dispatch = useDispatch()
  let con_log = ()=>{
    dispatch(log())
  }

最后在我们的按钮中定义事件触发这个方法

<button onClick={()=>{
        con_log()
      }}>按钮</button>

以上属于一些简单的redux的操作和定义，有不懂的可以进行私信，评论，或者从网上自行查找资料，感谢观看