0

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

我从服务器收到的数据如下所示：

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

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

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

当从服务器接收到更新的数据时，将调度一个SUCCESS 动作，更新 redux 状态，微调器将消失，最后将显示更新的数据。

问题 1 ：当用户只与一个灯交互时，我不希望所有灯都进入 LOADING 状态！

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

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

我需要帮助处理 redux 状态。

我希望这个信息帮助。您可以在下面找到我的用于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;
  }
};
4

1 回答 1

0

查看 immutability-helper：https ://github.com/kolodny/immutability-helper

太奇妙了。Reducers 可能会因为深度嵌套的状态而变得非常混乱，这个库有助于整理很多东西。

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

您可以使用 FlatList 中按下的列表项的索引，并将其传递给调度服务器请求的 LOADING 操作。然后，您可以在减速器中使用此索引来更新您所在州的特定灯。使用 immutability-helper 库，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;

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

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

于 2019-05-12T08:28:32.377 回答