umi中使用redux（@reduxjs/toolkit）

---

前言

这篇文章可以让你学会如何在umi3中配置使用redux

想必你已经搭好了umi框架，废话不多说，直接上教程

---

以下是正文

一、安装关于redux的第三方库

安装两个第三方库，用npm或yarn都可

tyarn add react-redux @reduxjs/toolkit

二、配置

1、创建store文件夹index文件

代码如下：

import {
    
     configureStore } from '@reduxjs/toolkit';
import userReducer from './slices/userSlice';

export default configureStore({
    
    
  reducer: {
    
    
    user: userReducer,
  },
});

2、创建slice文件

创建配置好后，引入到store的index文件中

代码如下：

import {
    
     createSlice } from '@reduxjs/toolkit';

export const counterSlice = createSlice({
    
    
  name: 'user',
  initialState: {
    
    
    value: 1,
  },
  reducers: {
    
    
    increment: (state) => {
    
    
      // Redux Toolkit 允许我们在 reducers 中编写 mutating 逻辑。
      // 它实际上并没有 mutate state 因为它使用了 Immer 库，
      // 它检测到草稿 state 的变化并产生一个全新的基于这些更改的不可变 state
      state.value += 1;
    },
    decrement: (state) => {
    
    
      state.value -= 1;
    },
    incrementByAmount: (state, action) => {
    
    
      state.value += action.payload;
    },
  },
});

// 为每个 case reducer 函数生成 Action creators
export const {
    
     increment, decrement, incrementByAmount } = counterSlice.actions;

export default counterSlice.reducer;

3、在入口文件中配置Provider

注意注意注意注意注意：：：：：：：：：：：

注意：这里的app入口文件一定是要是js文件，否则会报错，导致项目运行跑不起来。

代码如下：

import React from "react";
import {
    
     Provider } from "react-redux";

import store from '@/store'

export const rootContainer = (root) => {
    
    
  // console.log('rootrootrootroot', root, store);
  return (
    <Provider store={
    
    store} >
      {
    
    root}
    < /Provider>
    )
}

4、效果

最后附上效果

---

总结

以上就是在umi中使用redux的教程，不过在umi中有dva数据流插件，可以使我们在umi中使用全局数据。