如何在umi中使用redux(@reduxjs/toolkit)

小航要继续努力吖！

已于 2023-08-17 20:28:52 修改

阅读量877

点赞数 3

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2023-08-17 20:23:34 首次发布

本文链接：https://blog.csdn.net/2301_77305454/article/details/132348368

1.下载两个第三方库

下载时使用 npm 或者 yarn都可以

我这里使用的是yarn

yarn add react-redux @reduxjs/toolkit

2.配置我们的文件夹

1.在src目录下创建store文件夹，在我们创建好的store文件夹中新建一个index.js文件.

具体代码如下：

import { configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';
export default configureStore({
  reducer: {
    user: userReducer,
  },
});

2.再创建一个slices文件夹，在其中创建userSlice.tsx文件

代码如下：

import { createSlice } from '@reduxjs/toolkit';
export const counterSlice = createSlice({
  name: 'user',
  initialState: {
   Goods:2
  },
  reducers: {
    incrementByAmount: (state, action) => {
    state.Goods+=1
    
    },
  },
});
// 为每个 case reducer 函数生成 Action creators
export const {incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

3.在入口文件中配置provider，注意一下，这里的app入口文件必须是js文件，否则会报错，路径要在src下

代码如下：

import React from "react";
import { Provider } from "react-redux";
import store from '@/store'
export const rootContainer = (root)=>{
    return (
        <Provider store={store}>
            {root}
        </Provider>
    )
}