React-Redux list

Question

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

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

当我将状态连接到组件中的道具时，出现真正的问题。在componentwillmount（）中，我调用populateItems（）分派器，它动态地将项目添加到状态。然而，物品清单的道具似乎一次只能一个，所以我不能一次显示所有物品，但必须随着道具的到来不断更新清单。

对不起，我对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)); 
     }) 
    } 
} 

的减速只是增加了预先存在的列表。 如果我要更改操作以批量添加数据库中的整个列表，那么与手动添加一个项目相比，我将不得不解析该列表。

Answer 1

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

Answer 2

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

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

流量例如：

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调用，或通过的行动前往数据库。 您可以在动作之间或甚至在组件中进行选择。

尝试用行动关闭请求的周期上回调承诺

恩：调用一个动作的内部数据库：

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

我希望它帮你:)