CODEWITHSUNDEEP
javascriptreactjsredux
physicsboy
physicsboy

Reputation: 6358

Using single Redux reducer to get and store multiple results

I am wanting to use Redux to perform multiple dispatches to the same endpoint to fetch different responses, however I am unsure of how I can best store them within the Redux store...

myAction.js

export const GET_DATA = 'GET_DATA';
export const GET_DATA_SUCCESS = 'GET_DATA_SUCCESS';
export const GET_DATA_ERROR = 'GET_DATA_ERROR';

export const getData = (path) => ({
    type: GET_DATA,
    agent: agent.getData.get,
    agentData: path
});

myReducer.js

export default (state = {}, action) => {
    ...

    switch (action.type) {
        ...

        case GET_DATA_SUCCESS:
            newState = action.payload;
            break;

        ...

I will call the API like so:

const mapDispatchToProps = dispatch => {
  getData: path => getData(path);
}

...

// Using dispatch
getData('/myDataPath');

agent.js

...

getData : {
    get = path => performGet('https://my.url/data' + path);
}

Now I know this works perfectly fine for performing a single GET to the endpoint and storing in Redux store under a single entry.

Is there a way in which I can store multiple responses in the Redux store entry?

Upvotes: 0

Views: 41

Answers (1)

Brian Thompson
Brian Thompson

Reputation: 14395

You could use a dynamic property using bracket notation in your state based on the agentData or other identifying piece of your action.

It would look something like this:

Reducer

export default (state = {}, action) => {
  ...
  switch (action.type) {
    ...
    case GET_DATA_SUCCESS:
      newState = {
        ...state, // Keep all the other values (agentData entries)
        [action.agentData]: action.payload // Add/overwrite the current one
      };
      break;
      ...

Upvotes: 1

Related Questions