Question

我在一个请求中接收了所有灯的数据。（但是，我可以从服务器单独接收每个灯数据）。

我从服务器收到的数据看起来像这样。

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

在我的应用中，这些数据将以单个还原状态存储。我使用 FlatList 以及一个简单的 Switch 来呈现此数据，以便用户可以打开或关闭每个灯。

当用户更改灯的状态时，将调度 LOADING 动作，并且 whole 灯将显示一个微调器。

从服务器收到更新的数据后，将调度 SUCCESS操作，redux状态将更新，微调框将消失，最后将显示更新的数据。

>

问题1 ：当用户仅与一个灯交互时，我不希望所有灯进入LOADING状态！< / p>

问题2 ：我不知道我的请求会收到多少盏灯。

期望的行为：只有与用户进行交互的灯必须显示微调器，并抛出更新过程。

我需要帮助来处理redux状态。

希望此信息对您有所帮助。在下面，您可以找到我的 lightingInitReducer 的Rudcers（获取所有灯的数据）和 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

太神奇了。还原器在深层嵌套的状态下可能会变得真正混乱，而此lib可以使事情整理得更加整洁。

对于问题1 ，以下是有关如何更新单个灯并显示该项目的加载状态的想法：

您可以使用FlatList中按下的列表项的索引，并将其传递给调度服务器请求的LOADING操作。然后，您可以在减速器中使用此索引来更新状态下的特定灯泡。使用不可变性帮助程序库，reducer可能看起来像这样：

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;

一旦Web请求完成，并且您的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;

然后将“ loading”字段连接到FlatList中负责单个列表视图项的组件，并使用该值隐藏/显示加载状态。

关于问题2，我不确定我是否理解这个问题。

Redux单状态更新

1 个答案: