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?
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;
...