使用Redux和React执行异步操作

在我的React/Redux应用程序中，我有自定义的group对象。我希望有一个页面显示所有组的摘要列表，以及当前所选组的详细视图（默认为列表中的第一个组）。我需要从我的其余api申请一个组的列表（/groups），获得第一组的id（来自商店？）并将其设置为selected group，然后发出get请求以返回该组的成员列表（/groups/${id}/members）使用Redux和React执行异步操作

我是React/Redux的新手，我不确定如何去编码。我是否应该将其作为3个单独的操作来编写，并且可以使用前一个操作的结果使反应组件调用这些操作？或者我应该把这个逻辑放在一个使用thunk中间件的组合动作处理器中？在这种情况下，我将如何编写这样的动作处理程序？

来源

2017-10-09 CSharp

我会想象所选组是一个属性，它会被拿来组件的'componentWillMount'事件处理程序？在这些组中只要显示组组件 – Icepickle

的列表，我打算让选定的组和群组的任何组件的属性都管理页面。我不知道如何协调必要的操作来初始化这些属性 – CSharp

最好是写3个动作，然后用thunk将它们链接在一起。另外，任何请求都是异步的，因此无论如何他们需要使用thunk或其他异步方法。因此，请求/groups和/groups/${id}/members会看起来像这样（只为了简洁箭头的功能）的thunk：

export const requestGroups =() => (
 
    (dispatch) => { 
 
    // Maybe dispatch an action here that says groups are loading, 
 
    // for showing a loading icon or something 
 
    return fetch('/groups').then((response) => (
 
     dispatch(updateGroups(response)) 
 
     // Or just dispatch({ type: 'UPDATE_GROUPS', groups: response }) 
 
    ) 
 
    } 
 
)

哪里updateGroups是响应数据发送到减速的动作把它进入状态。并确保这些thunk回复承诺，以便您可以将它们链接在一起。你可能也想在这里做一些错误处理。

然后，一旦你有这三个动作，可以使结合他们都一个thunk：

export const initializeGroups =() => (
 
    (dispatch, getState) => (
 
    dispatch(loadGroups()).then(() => { 
 
     const { groups } = getState(); // Or wherever the list is 
 
     setSelectedGroup(groups[0]); 
 
     return getGroupData(groups[0]); 
 
    }).then(() => { 
 
     // Dispatch an action saying everything is done, or do any other stuff here. 
 
    }).catch((error) => { 
 
     // Do any error handling 
 
    }); 
 
) 
 
)

来源

2017-11-03 15:20:59 emma

谢谢，这几乎是我最终实现的。 – CSharp

使用Redux和React执行异步操作

回答

相关问题