react redux异步哀求

1,创建store

1. //store/modules/channelStore.js
2. import { createSlice } from "@reduxjs/toolkit"
3. import axios from "axios"
5. const channelStore = createSlice({
6.   name: 'channel',
7.   initialState: {
8.     channelList: []
9.   },
10.   reducers: {
11.     setChannels (state, action) {
12.       state.channelList = action.payload
13.     }
14.   }
15. })
17. // 异步请求部分
18. const { setChannels } = channelStore.actions
19. // 单独封装一个函数 在函数内部return一个新函数
20. const fetchChannelList = () => {
21.   return async (dispatch) => {
22.     // 调用异步请求
23.     const res = await axios.get('http://geek.itheima.net/v1_0/channels')
24.     // 调用同步actioncreate
25.     dispatch(setChannels(res.data.data.channels))
26.   }
27. }
29. export { fetchChannelList }
31. const reducer = channelStore.reducer
33. export default reducer

复制代码

2，导入子模块

1. // store/index.js
2. import { configureStore } from "@reduxjs/toolkit"
3. // 导入子模块reducer
4. import channelReducer from "./modules/channelStore"
6. const store = configureStore({
7.   reducer: {
8.     channel: channelReducer
9.   }
10. })
12. export default store

复制代码

3,利用

1. import { fetchChannelList } from "./store/modules/channelStore"
2. import { useEffect } from "react"
4. function App () {
5.   const { channelList } = useSelector(state => state.channel)
6.   // 得到dispatch函数
7.   const dispatch = useDispatch()
8.   useEffect(() => {
9.     dispatch(fetchChannelList())
10.   }, [dispatch])
11.   
12.   return (
13.     <div className="App">
14.       <ul>
15.         {channelList.map(item => <li key={item.id}>{item.name}</li>)}
16.       </ul>
17.     </div>
18.   )
19. }

复制代码