异步操作样板代码
1. 创建store的写法保持不变，配置好同步修改状态的方法
2. 单独封装一个函数，在函数内部return一个新函数，在新函数中
2.1 封装异步请求获取数据
2.2 调用同步actionCreater传入异步数据生成一个action对象，并使用dispatch提交
3. 组件中dispatch的写法保持不变
// channelStore.js
import { createSlice } from "@reduxjs/toolkit";
import axios from "axios";
const channelStore = createSlice({
name: "channel",
initialState: {
channelList: [],
},
reducers: {
setChannels(state, action) {
state.channelList = action.payload;
},
},
});
// 异步请求部分
const { setChannels } = channelStore.action;
const fetchChannlList = () => {
return async (dispatch) => {
const res = await axios.get("http://xxx.xxx.net/v1_0/channels");
dispatch(setChannels(res.data.data.channels));
};
};
export { fetchChannlList };
const reducer = channelStore.reducer;
export default reducer;
// .store/moudles/index.js
import { configureStore } from "@reduxjs/toolkit";
// 导入子模块reducer
import counterReducer from "./modules/counterStore";
import channelReducer from "./modules/channelStore";
const store = configureStore({
reducer: {
counter: counterReducer,
channel: channelReducer,
},
});
export default store;
// App.js
import "./App.css";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
// 导入创建action对象的方法
import { decrement, increment, addToNum } from "./store/modules/counterStore";
import { fetchChannlList } from "./store/modules/channelStore";
function App() {
const { count } = useSelector((state) => state.counter);
const { channelList } = useSelector((state) => state.channel);
// 得到dispatch函数
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchChannlList());
}, [dispatch]);
return (
<div>
{/* 调用dispatch提交action对象 */}
<button onClick={() => dispatch(decrement())}>-</button>
<span>{count}</span>
<button onClick={() => dispatch(increment())}>+</button>
<button onClick={() => dispatch(addToNum(10))}>add To 10</button>
<button onClick={() => dispatch(addToNum(20))}>add To 20</button>
<ul>
{channelList.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
export default App;