I have a situation in my Redux application where I currently have 3 separate reducers that handle the fetching of data from an api. An example of one of my reducers would be:
const INITIAL_STATE = {
data: [],
loading: false,
error: ''
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case GET_ALL_ORDERS_START:
return {
...state,
loading: true
};
case GET_ALL_ORDERS_SUCCESS:
return {
...state,
allOrders: action.payload,
loading: false
};
case GET_ALL_ORDERS_FAIL:
return {
...state,
loading: false,
error: action.payload
};
default:
return state;
}
};
Note the loading and error states, these are identical in each current reducer and will be for any subsequent reducers I write that involve fetching data from the api.
I would like to add a further reducer that is used only for the loading and error pieces of state. The other 3 would store the data.
This would give me:
Data reducers x 3
const INITIAL_STATE = {
data: []
// any other state in the future
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case GET_ALL_ORDERS_SUCCESS:
return {
...state,
allOrders: action.payload
};
default:
return state;
}
};
Loading / Error reducer (handles loading / error for entire app)
const INITIAL_STATE = {
loading: false,
error: ''
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case GET_ALL_ORDERS_START:
return {
...state,
loading: true
};
case GET_ALL_ORDERS_SUCCESS:
return {
...state,
loading: false
};
case GET_ALL_ORDERS_FAIL:
return {
...state,
loading: false,
error: action.payload
};
default:
return state;
}
};
As you can see this means the GET_ALL_ORDER_SUCCESS action type will be used in 2 separate reducers. My question is, is this ok? or does it go against convention?
Many thanks in advance.
