React-Redux 列表答案

【问题标题】：React-Redux listReact-Redux 列表
【发布时间】：2017-11-22 12:25:10
【问题描述】：

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

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

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

对不起，我对 react 和 redux 都很陌生，但这个问题是我绝对需要帮助的。如果您需要澄清或编码 sn-ps，我很乐意分享。

编辑：这里有一些代码 sn-ps

  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 只是添加预先存在的列表。如果我要更改操作以批量添加数据库中的整个列表，我必须以不同于手动添加一项的方式解析该列表。

【问题讨论】：

您可以使用一次设置所有项目的操作
如果可以的话，把你所有的相关代码放在这里，这样更容易帮助你。
请包含代码

标签： reactjs redux react-redux

【解决方案1】：

你快到了。只是对概念进行了一些调整。流量其实是。

用户从组件派发一个动作，然后一个动作从组件接收一个有效负载/数据，该动作与减速器对话，在这种情况下，减速器只是一棵大数据树的一部分。

流程示例：

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
    }
  }
}

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

这里最重要的是react-redux 称为connect

它包装了组件，这让神奇的事情发生了：

将操作连接到减速器
将调度函数注入props
允许您从商店中检索一些数据

这是很多混乱的根源。

现在问题来了：

建议您仅在获得成功执行的参考后才通过操作完成 API 调用或访问数据库。您可以在操作之间进行选择，甚至可以在组件中进行选择。

尝试通过回调 promise

上的操作来关闭请求周期

ex：在 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));
    });
  };
};

希望对你有帮助:)

【讨论】：

【解决方案2】：

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

【讨论】：