从服务器提取的数据没有加载到redux存储中

Question

我从mongoDB数据库获取数据，然后从服务器获取数据，最后将数据呈现到指定组件中的UI。我正在使用redux工具包进行状态管理。问题是，当从服务器获取数据时，它在存储中不可见。为什么初始状态下的空数组在获取数据后仍然为空？我使用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])

Answer 1

它是带有大写R的extraReducers，您的代码包含extrareducers。