我正在从mongoDB数据库中获取数据,然后从服务器中获取数据,最后将数据呈现到指定组件的UI中。我正在使用redux-toolkit进行状态管理。问题是,当从服务器中获取数据时,它在存储中是不可见的。为什么在获取数据后,初始状态中的空数组仍然是空的?我'我使用createSlice Api生成操作创建者和操作类型,并使用createAsyncThunk Api执行从服务器获取数据的异步任务。
切片减速机
import { createSlice, createAsyncThunk} from '@reduxjs/toolkit'
import axios from 'axios'
const initialState = {
realestate: [],
isSuccess: false,
isLoading: false,
message: '',
}
export const getRealEstates = createAsyncThunk(
'realestate/getRealEstates', async () => {
try {
const response = await axios.get('castles')
return response.data
} catch (error) {
console.log(error)
}
}
)
export const estateSlice = createSlice({
name: 'realestate',
initialState,
reducers: {
reset: (state) => initialState,
},
extrareducers: (builder) => {
builder.addCase(getRealEstates.pending, (state) => {
state.isLoading = true
})
builder.addCase(getRealEstates.fulfilled, (state, action) => {
state.isLoading = false
state.isSuccess = true
state.realestate = action.payload
})
builder.addCase(getRealEstates.rejected, (state, action) => {
state.isLoading = false
state.isError = true
state.message = action.payload
})
}
})
export const { reset } = estateSlice.actions
export default estateSlice.reducer
商店
export const store = configureStore({
reducer: {
realestate: realestateReducer,
registered: registerReducer,
},
});
组成部分
const realestates = useSelector(state => state.realestate)
const { isLoading, realestate, isError, message, isSuccess} = realestates
const dispatch = useDispatch()
useEffect(() => {
dispatch(getRealEstates())
if(realestate){
setShow(true)
}else{
console.log('No data retrieved')
}
}, [dispatch, isError, realestate, message])
1条答案
按热度按时间kjthegm61#
它是
extraReducers
加上大写的R
,你的代码包含extrareducers
。