之前使用react的都知道,全局状态管理redux的配置有多麻烦,配置store,reducer,actions,而且项目一旦大起来,很多个reducer,actions文件看着头痛,现在官方推出了一个新的编写redux的方法就是@reduxjs/toolkit,它极大地简化了配置,帮助我们从action/reducer地狱从解脱出来,步骤如下:
一、配置store
这一步核心api是configureStore,它帮助我们方便地配置store,包括合并 reducer、添加 thunk 中间件以及设置 Redux DevTools 集成,示例如下:
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "../reducer/user";
import orderReducer from "../reducer/order";
export default configureStore({
reducer: {
user: userReducer //key: Reducer
order: orderReducer
}
});
如果需要合并多个reducer时,只需要在reducer对象里定义一个键用于区分不同的reducer即可,注意在子组件获取数据时需要多调用一层,如:store.user.userName
二、配置reducer
这一步用到的核心api是createSlice,与之前reducer写法不同,之前action以及reducer需要分开配置,而使用createSlice允许我们定义一个仓库initialState,以及其相关actions放置于reducers对象下,然后将其暴露出去,子组件可以直接在dispatch中调用,示例如下:
import { createSlice } from "@reduxjs/toolkit";
const UserState = createSlice({
name: "user",
initialState: {
userName: ""
},
reducers: {
setUserName: (state, action) => {
/*
* action包含2个属性,
* type: "user/setUserName"
* payload: 通过dispatch调用此函数时传的值
*/
state.userName = action.payload;
}
}
});
//将action暴露出去
export const { setUserName } = UserState.actions;
export default UserState.reducer;
到这一步,我们的store就配置完成了,是不是跟以前相比简单多了,这就是toolkit的魅力!
三、引入Provider
import {Provider} from "react-redux";
import Main from "./main";
import store from "../store";
function App(){
return (
<Provider store={store}>
<Main />
</Provider>
)
}
export default App;
四、子组件调用
import { useDispatch, useSelector } from "react-redux";
import { setUserName } from "reducer/user";
function Child(){
const dispatch = useDispatch();
const state = useSelector(state=>state);
const { userName } = state.user;
const clickMethod = () => {
dispatch(setUserName("ggbond"));
}
return (
<button onClick={clickMethod}>click me</button>
)
}
到此整个redux全局状态管理就配置完成了,不知道你们舒服了没有反正我是舒服了!