前言
这篇文章可以让你学会如何在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中使用全局数据。
