?

// 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;

?

?