Redux 工具包问题，获取无法解构属性，因为它未定义

Question

嘿伙计们，我试图使用 redux 工具包，我有一个奇怪的问题 我得到 ：

Cannot destructure property 'currentRequestId' of 'getState(...).toys' as it is undefined

VS 代码告诉我，查询前的等待是： "await"对此表达式的类型没有影响

当前请求 ID 确实没有显示在商店中，即使我在代码中设置了它

我从他们的网站上复制了这个示例并对其进行了修改，也许我的 Axios 调用杀死了它？ 我可以看到由于某种原因，我的呼叫甚至没有被执行。

我不知道如何实现像他们示例中所示的 UserApi，所以我使用常规 axios 调用。

我的代码：

import React from 'react'
import { createAsyncThunk, createSlice, unwrapResult  } from '@reduxjs/toolkit'
import axios from 'axios'
import { useDispatch,useSelector } from 'react-redux'
export const query = createAsyncThunk(
'/api/toys',
async (criteria, { getState, requestId }) => {
const { currentRequestId, loading } = getState().toys
if (loading !== 'pending' || requestId !== currentRequestId) {
return
}
const response = await axios.get('http://localhost:3030/api/toys')
return response.data
}
)
export const ToySlice = createSlice({
name: 'toys',
initialState: {
entities: [],
loading: 'idle',
currentRequestId: undefined,
error: null
},
reducers: {},
extraReducers: {
[query.pending]: (state, action) => {
if (state.loading === 'idle') {
state.loading = 'pending'
state.currentRequestId = action.meta.requestId
}
},
[query.fulfilled]: (state, action) => {
const { requestId } = action.meta
if (state.loading === 'pending' && state.currentRequestId === requestId) {
state.loading = 'idle'
state.entities.push(action.payload)
state.currentRequestId = undefined
}
},
[query.rejected]: (state, action) => {
const { requestId } = action.meta
if (state.loading === 'pending' && state.currentRequestId === requestId) {
state.loading = 'idle'
state.error = action.error
state.currentRequestId = undefined
}
}
}
})
export const Test = () => {
const { toys, loading, error } = useSelector(state => state.test)
const dispatch = useDispatch()

const fetchAllToys = async userId => {
try {
const resultAction = await dispatch(query())
const toys = unwrapResult(resultAction)
console.log("Test -> user", toys)
return toys
} catch (err) {
console.log("UsersComponent -> err", err)
}
}
return(<div>
Hello
<button onClick={()=>fetchAllToys()}>Fetch</button>
</div>)
// render UI here
}

export const selectCount = state => state.counter.value;
export default ToySlice.reducer;

商店：

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import Test from '../features/Test/test'
export default configureStore({
reducer: {
counter: counterReducer,
test:Test
},
});

链接到示例： https://jsfiddle.net/3xq7Lng2/

文档：

https://redux-starter-kit.js.org/api/createAsyncThunk

Answer 1

您的笨蛋正在尝试访问getState().toys.currentRequestId.

但是，您没有state.toys键，因为您没有传入名为toys的字段以configureStore。 你正在定义state.counter和state.Test，但没有state.toys，所以它将是未定义的。

我不知道其中包含该ToySlice的文件名是什么。 根据导入，我假设它实际上是名为features/Test/test.js的文件。

立即的解决方法是将商店设置代码更改为：

import toysReducer from '../features/Test/test';
export default configureStore({
reducer: {
counter: counterReducer,
toys: toyReducer
},
});

这将导致state.toys存在。

您还需要更新当前正在执行useSelector(state => state.test)的组件，并将其更改为state => state.toys。

从那里，我建议将文件夹和文件名更改为features/toys/toysSlice.js并相应地更新导入语句。