// 1.导入 创建 channelStore 所依赖的函数cerateSlice
import { createSlice } from '@reduxjs/toolkit'
// 2.调用createSlice函数创建channelStore
const channelStore = createSlice({
name: 'channel', // channel模块
initialState: {
// 创建初始化状态
channelsList:[]
},
reducers: {
// 创建reducers 方法 , action 包含 payload type
setChannelsList (state, action) {
// 修改状态
state.channelsList = action.payload
},
}
})
console.log('channelStore',channelStore)
// 3.调用store.actions 获取actions中的方法
const {setChannelsList} = channelStore.actions
// 4.调用store.reducer方法获取reducer函数
const reducer= channelStore.reducer
// 5.创建获取channelsList的异步action方法
const getChannelsList = () => {
// 颗粒化形参为dispatch 方法去调用reducer中的方法
return async(dispatch)=> {
const res = await fetch('http://geek.itheima.net/v1_0/channels')
const { data } = await res.json()
// 调用reducer中的方法给state赋值
dispatch(setChannelsList(data.channels))
}
}
// 6. 导出actions方法 和 异步方法
export {setChannelsList, getChannelsList }
// 7.导出channelStore模块
export default reducer
