React Redux从动态选择器获取数据

Question

我在访问对动态查询的响应时遇到了一些困难。

我认为问题出在我的选择器上。

选择器：

export const getDatasetFetchState = state => state.tracking.dataset
export const getDatasetType = state => state.tracking.datasetType

其中，dataset是一个可以包含一个或多个数据集类型的对象。

您可以在此处看到树状结构：https://gyazo.com/3f1c228a998b1dde6851296e40a48f73其中"Document"是用我的datasetType reducer:动态设置的

const updateDatasetType = (state, action) => ({
...state,
datasetType: action.value,
})
const handleDatasetSuccess = (state, action) => ({
...state,
dataset: {
...state.dataset,
[action.datasetType]: {
...state[action.datasetType],
isLoading: false,
response: action.response,
},
},
})

在前端，我可以通过以下方式访问数据：

const datasetType = useSelector(getDatasetType)
const {response: responseDataset, error: errorDataset} = useSelector(getDatasetFetchState)

然后我试着用地图记录这样的数据：

{datasetType.map(item => console.log(responseDataset[item].data))}

其中datasetType是一个包含一个或多个字符串的数组。

当我点击Ag网格的一行时，就会设置DatasetType，该网格显示具有数据集类型的数据包

编辑：

const handleDatasetRequest = (state, action) => ({
...state,
dataset: {
...state.dataset,
[action.datasetType]: {
...state.dataset[action.datasetType],
hasInit: true,
isLoading: true,
response: null,
error: null,
},
},
})

Answer 1

我得到错误：无法读取未定义的属性"Document">

const {response: responseDataset, error: errorDataset} =
useSelector(state => state.tracking.dataset) // <-- response is undefined

您正试图访问数据集状态的response，但它不存在：

const handleDatasetSuccess = (state, action) => ({
...state,
dataset: {
...state.dataset,
// response is not here
[action.datasetType]: {
...
response: action.response, // response is here
},
},
})

所以将其更改为：

const dataset = useSelector(state => state.tracking.dataset);
datasetType.map(item => console.log(dataset[item].response.data))

在Redux开发工具中，我可以看到数据集是空的，因为错误发生在调用的请求之前

您还应该处理这种情况(在数据来自服务器之前，数据集是未定义的(：

datasetType.map(item => console.log(dataset && dataset[item] && dataset[item].response && dataset[item].response.data))

Ps：我还可以在你的代码中看到另一个错误：

const handleDatasetSuccess = (state, action) => ({
...state,
dataset: {
...state.dataset,
[action.datasetType]: {
...state[action.datasetType], // <- Here

它应该是CCD_ 2。