CODEWITHSUNDEEP
javascriptreactjsreduxreact-redux
akromx
akromx

Reputation: 99

React Redux get data from dynamic selector

I'm having some difficulty accessing the response to a dynamic query.

I think the problem is in my selector.

The selectors :

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

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

Where dataset is an object that can contain one or more dataset types.

You can see the tree structure here : https://gyazo.com/3f1c228a998b1dde6851296e40a48f73 where 'Document' is dynamically set with my 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,
    },
  },
})

In the Front-End I can access the data by :

const datasetType = useSelector(getDatasetType)

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

And then I try to log the data like this with a map :

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

where datasetType is an array with one or more strings.

DatasetType is set when I click on a row of an Ag-Grid Grid which displays Data packages with Data Set Types

EDIT :

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

Upvotes: 0

Views: 2519

Answers (1)

yaya
yaya

Reputation: 8243

I got the error : Cannot read property 'Document' of undefined

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

You're trying to access response of the the dataset state, but it's not there :

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

So change it to:

const dataset = useSelector(state => state.tracking.dataset);

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

and in Redux Dev Tools I can see that dataset is empty because the error occurs before the request calling

you should also handle this case (before the data comes from the server, the dataset is undefined) :

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

Ps: Also i can see another error in your code:

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

it should be state.dataset[action.datasetType] instead.

Upvotes: 1

Related Questions