如何将数据异步加载到Redux？

Question

Suppose that one has the following component file HelloForm.jsx :

import React from 'react';
import {graphql} from 'react-apollo';
import {connect} from 'react-redux';
import {actions, Control, Form} from 'react-redux-form';
import {compose, withProps} from 'recompose';

import query from './HelloForm.gql';

const passThrough = fn => BaseComponent => props => {
    fn(props, BaseComponent);

    return BaseComponent(props);
};

export const HelloForm = ({onSubmitEventHandler}) =>
    <Form
            className="my-form"
            model="forms.hello"
            onSubmit={onSubmitEventHandler}
    >
        <label htmlFor="name">Name</label>
        <Control.text
            {...props}
            model=".name"
            id="name"
        />

        <button type="submit">Say Hello</button>
    </Form>;

export const enhance = compose(
    connect(),
    withProps({
        onSubmitEventHandler: ({name}) => {
            window.alert(`Hello, ${name}`);
        },
    }),
    graphql(query),
    passThrough(({data, dispatch, loading}) => {
        if (!loading) {
            dispatch(actions.load('forms.hello', data));
        }
    }),
);

export default enhance(HelloForm);

This appears to work as expected but one gets the following warning:

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 .

However, React's component documentation suggests that one should dispatch the action during the componentDidMount lifecycle event (which can be done with functional components via recompose.lifecycle ). But no props are provided to the componentDidMount event handler.

What is the proper way to "asynchronously" dispatch actions to Redux?

Answer 1

The solution was indeed to use the recompose.lifecycle higher-order component. However, one must not use an arrow function. The updated enchance higher-order component should be implemented as follows:

export const enhance = compose(
    connect(),
    withProps({
        onSubmitEventHandler: ({name}) => {
            window.alert(`Hello, ${name}`);
        },
    }),
    graphql(query),
    lifecycle({
        componentDidMount: function () {
            const {dispatch, loading, recipe} = this.props;

            if (loading) {
                dispatch(actions.load('forms.hello', data));
            }
        },
    }),
);