在apollo-react查询后调度redux动作

时间:2017-09-07 10:35:09

标签: redux react-apollo

我想在查询完成后立即发送redux操作。 - 哪里是正确的地方?

这里我保留了对refetch函数的引用,以便我可以在以后使用最新数据轻松更新视图。

export default graphql(
    allFilesQuery,
    {
        props: ({ ownProps, data }) => {
            const { dispatch } = ownProps;
            dispatch(
                setRefetchAllFiles(data.refetch)
            );
            return {
                data,
                ...ownProps,
            };
        }
    }
)(FileListComponent);

虽然这有效,但我也收到警告,说:

Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.

1 个答案:

答案 0 :(得分:1)

道具功能应该是纯粹的并且返回道具以注入组件而不执行任何类型的副作用。实际上你可以通过将调度包装在setTimeout中来调度它,但这是一个非常糟糕的主意,因为每次组件重新渲染时都会运行props函数,并且很可能触发许多不需要的调度。如果您的调度使组件重新渲染,它甚至可能导致无限循环。

在您的组件中执行所需操作的正确位置。您可以使用componentWillReceiveProps(或其他生命周期),并将之前的道具与下一个道具进行比较,在适当时触发调度。您可以使用data.networkStatusdata.loading