在 apollo-react 查询之后调度 redux 操作

Question

我想在查询完成后立即调度 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`.

Answer 1

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

做你想做的事情的正确位置是在你的组件中。您可以使用 componentWillReceiveProps （或其他生命周期），并将前一个道具与下一个道具进行比较，在适当的时候触发调度。您可以为此使用 data.networkStatus 或 data.loading。

在 apollo-react 查询之后调度 redux 操作

Dispatch redux action after apollo-react query

redux

react-apollo