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

a6b3iqyw  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(137)

我正在从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])
kjthegm6

kjthegm61#

它是extraReducers加上大写的R,你的代码包含extrareducers

相关问题