React-Redux列表

Question

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

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

当我将状态连接到组件中的属性时，真正的问题就出现了。在componentwillmount()中，我调用了populateItems() dispatcher，它动态地将项添加到状态中。然而，项目列表的道具似乎是一次只有一个，所以我不能一次显示所有的项目，而是必须不断更新，随着道具的到来，不断更新列表。

对不起，我对react和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

你就快到了。在概念上只有一些调整。流程实际上是。

用户从组件发送操作，然后操作从组件接收有效负载/数据，操作与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
    }
  }
}

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

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

它包装了组件，这使得魔术发生了：

连接操作以将reducers

• Inject函数分配到存储中您可以从props

• Allow

检索一些数据

这是造成很多混乱的一个原因。

现在来看问题：

建议您只有在获得成功执行的引用后，才通过操作最终完成API调用或到数据库的行程。您可以在操作之间进行选择，甚至可以在组件中进行选择。

尝试通过对 promise的回调执行操作来结束请求周期

例如:要在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之类的中间件来批处理您的操作，并且只通知订阅者一次。