商城外贸网站设计_设计素材网站集合_seo薪酬如何_网站seo推广员招聘

 

import { createSlice } from "@reduxjs/toolkit";const channelStore = createSlice({name:"channel",initialState:{channelList :[]},reducers:{setChannels (state,action){state.channelList = action.payload}}
})// 异步请求
const {setChannels} = channelStore.actions
const fetchChannelList = ()=>{return async(dispatch)=>{const res = await axios.get('http://geek.itheima.net/v1_0/channels')dispatch(setChannels(res.data.data.channels))}
}export {fetchChannelList}const reducer = channelStore.reducerexport default reducer

import { configureStore } from "@reduxjs/toolkit"; //configureStore 接受一个名为 reducer 的函数作为命名参数;configureStore 会自动使用良好的默认设置来设置 store
import counterReducer from './modules/counterStore'
import channelReducer from './modules/channelStore'
const store = configureStore({reducer:{counter:counterReducer,channel:channelReducer}
})
export default store

import {useDispatch,useSelector } from "react-redux";
import {increment,decrement,addToNum} from './store/modules/counterStore'
import { fetchChannelList } from "./store/modules/channelStore";
import { useEffect } from "react";
function App() {const {count} = useSelector(state =>state.counter)//获得state的数据const {channelList} = useSelector(state =>state.channel)const dispatch = useDispatch()// 使用useEffect触发异步请求useEffect(()=>{dispatch(fetchChannelList())},[dispatch])return (<><button onClick={()=>dispatch(decrement())}>-</button>
{count}
<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></>)
}export default App

黑马前端Redux快速入门到美团实战教程，前端React集中状态管理工具redux视频教程_哔哩哔哩_bilibili