Redux single state update - reactjs

Question

I receive the data for all lamps in one request.
(I can, however, receive each lamp data from the server individually).
The data I receive from the server looks like this.:
[
{
"id": "1",
"state": 'ON'
},
{
"id": "2",
"state": 'OFF'
},
{
...
},
...
]
In my app, this data will be stored in a single redux state. I use FlatList to render this data along with a simple Switch so that the user can turn each lamp ON or OFF.
When the user changes a lamp's state, a LOADING action will be dispatched and the whole lamps will show a spinner.
When the updated data is received from the server, a SUCCESS action will be dispatched, the redux state will be updated, the spinner will disappear and finally, the updated data will be shown.
Problem 1: When the user interacts with only one lamp, I don't want all lamps to go into LOADING state!
Problem 2: I never know how many lamps I will receive in my requests.
Desired Behaviour: Only the lamp, with which the user has interacted, must show a spinner and goes thrown the update process.
I need help with handling the redux states.
I hope this information helps. Below you can find my Rudcers for lightingInitReducer (getting data for all lamps) and lightingChangeStateReducer (changing the state of a lamp). isLoading is used for showing the spinner. Additionally, when the change state process was successful (LIGHTING_CHANGE_STATUS_SUCCESS is dispatched), the new data will be requsted from the server with an init request:
export const lightingInitReducer = (state = {
isLoading: false,
errMess: null,
info: {},
}, action) => {
switch (action.type) {
case ActionTypes.LIGHTING_INIT_SUCCESS:
return {
...state, isLoading: false, errMess: null, info: action.payload,
};
case ActionTypes.LIGHTING_INIT_FAILED:
return {
...state, isLoading: false, errMess: action.payload, info: {},
};
case ActionTypes.LIGHTING_INIT_LOADING:
return {
...state, isLoading: true, errMess: null, info: {},
};
default:
return state;
}
};
export const lightingChangeStateReducer = (state = {
isLoading: false,
errMess: null,
info: {},
}, action) => {
switch (action.type) {
case ActionTypes.LIGHTING_CHANGE_STATUS_SUCCESS:
return {
...state, isLoading: false, errMess: null, info: action.payload,
};
case ActionTypes.LIGHTING_CHANGE_STATUS_FAILED:
return {
...state, isLoading: false, errMess: action.payload, info: {},
};
case ActionTypes.LIGHTING_CHANGE_STATUS_LOADING:
return {
...state, isLoading: true, errMess: null, info: {},
};
default:
return state;
}
};

Answer 1

Check out immutability-helper: https://github.com/kolodny/immutability-helper
It's amazing. Reducers can get real messy with deeply nested states, and this lib helps tidy things up a lot.
For problem 1, here is an idea of how you could update a single lamp, and display a loading state for that one item:
You can use the index of the pressed list item from your FlatList and pass that along to the LOADING action that dispatches your server request. You can then use this index in your reducer to update that specific lamp in your state. Using the immutability-helper library, the reducer might look like this:
import update from 'immutability-helper';
case UPDATE_LAMP_REQUEST:
let newState = update(state, {
lamps: {
[action.index]: {
loading: { $set: true }, // turns on loading state for lamp at index
}
}
})
return newState;
Once the web request has complete, and your SUCCESS action has dispatched, you can then pass that same index from your FlatList to your reducer, and update the lamp in your state with the updated lamp from the server:
import update from 'immutability-helper';
case UPDATE_LAMP_SUCCESS:
let newState = update(state, {
lamps: {
[action.index]: {
loading: { $set: false }, // turn off loading
$set: action.lamp // set the new lamp state
}
}
})
return newState;
You'd then connect the "loading" field to the component responsible for a single list view item in your FlatList and use that value to hide / show the loading state.
As for problem 2, I'm not sure I understand the question.