React-Redux列表

Question

所以我相信我现在了解react-redux的流程。但是，有些事情让我感到困惑。

现在我有一个工作的reducer更新状态，动作，＆＃34; ADD_ITEM＆＃34;。这工作正常。但我希望这些数据能够持续存在。所以我也将该项目存储到我的数据库中。刷新页面并重置状态时，我从服务器获取一个包含所有项目的列表，并动态调度＆＃34; ADD_ITEM＆＃34;行动。这也工作正常，但我不确定这是否正确。

当我将状态连接到组件中的props时，会出现真正的问题。在componentwillmount（）中，我调用populateItems（）调度程序，该调度程序动态地将项添加到状态。但是，项目列表的道具似乎一次只有一个，所以我不能一次真正显示所有项目，但必须不断更新，随着道具的到来不断更新列表。

抱歉，我对反应和redux都很新，但这个问题是我绝对需要帮助的问题。如果您需要澄清或代码片段，我很乐意分享。

编辑：以下是一些代码段

  let itemID = 0;
export function populateList(id) {
    return (dispatch) => {
        return axios.get(`/api/item/getItems?ID=${id}`).then((res) => {
            console.log("Response:", res);
            res.data.map((data) => {
                dispatch(addToItemList(data));
            })
        })
    }
}

export function addToItemList(data) {
    console.log(data);
    return {
        type: ADD_ITEM,
        id: itemID++,
        itemName: data.name,
        itemDescription: data.description
    }
}

export function addItem(data) {
    return (dispatch) => {
        return axios.post('/api/item/add', data).then(res => {
            dispatch(addToItemList(data));
        })
    }
}

reducer只添加预先存在的列表。 如果我要将操作更改为从数据库批量添加整个列表，我将不得不解析该列表，而不是手动添加一个项目。

Answer 1

你快到了。这个概念只有一些调整。 实际上是流量。

用户从组件调度操作，然后操作从组件接收有效负载/数据，Action与reducer交换，在这种情况下，reducer只是一块大数据树。

流程示例：

Component dispatch action ( onClick(dispatch(DoAction)) )  => 

DoAction will listen  => 

const DoAction = (data) => {

  return { type: 'BEGIN_ACTION', data }
};


The reducer will receive this action => 

 export default (state = initialState, action) =>  {
  if (action) {
    switch (action.type) {
      case 'BEGIN_ACTION':
        return {
          show: true
        }
      case 'FAIL_ACTION':
        return initialState
      default:
        return state
    }
  }
}

================== // =========================== ===============

这里最重要的是connect

所谓的react-redux

它包裹了组件​​，这使魔术发生：

• 将操作连接到reducer
• 将调度功能注入props
• 允许您从商店中检索一些数据

这引起了很多困惑。

现在提出问题：

建议您只有在成功执行引用后才能通过操作完成API调用或数据库访问。 您可以选择Actions或甚至在组件中。

尝试使用回调 承诺

上的操作关闭请求周期

例如：在Action中调用数据库：

export const login = (credentials) => {
  return (dispatch) => {
    dispatch(loginBegin())
    return auth.login(credentials).then((user) => {
      dispatch(loginSuccess(user));
      browserHistory.push('/home');

    }).catch((error) => {
      dispatch(loginFail(error.response));
    });
  };
};

我希望它能帮助你:)

Answer 2

您可以使用redux-batched-actions等中间件批量处理您的操作，并仅通知订阅者一次。