Redux единичное обновление

Question

Я получаю данные для всех ламп в одном запросе .(Однако я могу получить каждую ламповую информацию с сервера индивидуально ).

Данные, которые я получаю от сервера, выглядят следующим образом .:

[
    {
        "id": "1",
        "state": 'ON'
    },
    {
        "id": "2",
        "state": 'OFF'  
    },
    {
        ...
    },
    ...
]

В моем приложении эти данные будут храниться в одном избыточном состоянии.Я использую FlatList для рендеринга этих данных вместе с простым переключателем , чтобы пользователь мог включить или выключить каждую лампу.

Когда пользователь изменяет состояние лампы, будет отправлено действие ЗАГРУЗКА , а на лампах целом будет отображаться счетчик.

При обновленииданные получены с сервера, будет отправлено действие SUCCESS , будет обновлено состояние избыточности, закручиватель исчезнет и, наконец, отобразятся обновленные данные.

Проблема 1 : когда пользователь взаимодействует только с одной лампой, я не хочу, чтобы все лампы перешли в состояние ЗАГРУЗКА!

Проблема2 : Я никогда не знаю, сколько ламп я получу в своих запросах.

Желаемое поведение : Только лампа, с которой взаимодействовал пользователь, должна показывать счетчик и запускает процесс обновления.

Мне нужна помощь с обработкой избыточных состояний.

Надеюсь, эта информация поможет.Ниже вы можете найти мои Rudcers для lightingInitReducer (получение данных для всех ламп) и lightingChangeStateReducer (изменение состояния лампы). isLoading используется для отображения счетчика.Кроме того, после успешного завершения процесса изменения состояния (отправлено LIGHTING_CHANGE_STATUS_SUCCESS ), новые данные будут повторно получены с сервера с помощью запроса init :

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

Проверьте помощник по неизменяемости: https://github.com/kolodny/immutability-helper

Это потрясающе.Редукторы могут сильно запутаться в глубоко вложенных состояниях, и эта библиотека помогает привести в порядок вещи.

Для задачи 1 , вот идея о том, как можно обновить одну лампу, иотобразить состояние загрузки для этого одного элемента:

Вы можете использовать индекс нажатого элемента списка из вашего FlatList и передать его в действие LOADING, которое отправляет запрос вашего сервера.Затем вы можете использовать этот индекс в вашем редукторе для обновления этой конкретной лампы в вашем штате.Используя библиотеку immutability-helper, редуктор может выглядеть следующим образом:

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;

После завершения веб-запроса и отправки вашего действия SUCCESS вы можете передать этот же индекс из FlatList вашему редуктору.и обновите лампу в вашем состоянии с помощью обновленной лампы с сервера:

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;

Затем вы бы подключили поле «загрузки» к компоненту, отвечающему за один элемент представления списка в вашем FlatList, и использовалиэто значение, чтобы скрыть / показать состояние загрузки.

Что касается проблемы 2, я не уверен, что понимаю вопрос.