Асинхронная загрузка данных в Redux-форме

Question

Я работаю с React и Redux и использую Redux-форму для своих форм.

Я пытаюсь загрузить некоторые исходные данные из базы данных.В документах рекомендуется использовать

{ 
    load: loadAccount 
}

в компоненте подключения, но я изо всех сил пытаюсь установить его правильно.

Я могу загрузить исходные данные другим способом: добавив действие диспетчеризации для подключения компонента и вызова его с componentDidMount, но я хотел бы понять, как установить { load: loadAccount }.

Это мой файл действий - я показываю только то действие, которое имеет значение -:

const actions = {
    requestProject: () => {
        return {
            type: C.LOAD_PROJECT_STARTED,
        };
    },

    receiveProject: (id, data) => {
        return {
            type: C.LOAD_PROJECT_SUCCESS,
            id,
            data,
        };
    },

    loadProject: (id = '') => {
        const url = '/api/projects/';
        const encodedURI = isBrowser
            ? encodeURI(window.location.origin + url + id)
            : encodeURI('http://localhost:' + config.SERVER + url + id);
        return isBrowser
            ? function(dispatch) {
                dispatch(actions.requestProject());
                return fetch(encodedURI)
                    .then(
                        (response) => {
                            return response.json();
                        },
                        (error) => {
                            return console.log('An error occurred.', error);
                        }
                    )
                    .then((data) => {
                        return dispatch(actions.receiveProject(id, data));
                    });
            }
            : fetch(encodedURI)
                .then((response) => {
                    return response.json();
                })
                .then((data) => {
                    return data;
                })
                .catch((error) => {
                    return Promise.reject(Error(error.message));
                });
    },
};

export default actions;

Тогда мои редукторы - опять-таки только один::

export const Project = (state = {}, action) => {
    switch (action.type) {
    case C.LOAD_PROJECT_STARTED:
        console.log('LOAD_PROJECT_STARTED');

        return Object.assign({}, state, {
            isFetching: true,
        });
    case C.LOAD_PROJECT_SUCCESS:
        return Object.assign({}, state, {
            ...action.data.Project,
            isFetching: false,
        });
    case C.SUBMIT_PROJECT_FORM_STARTED:
        return Object.assign({}, state, {
            isFetching: true,
        });
    case C.SUBMIT_PROJECT_FORM_SUCCESS:
        return Object.assign({}, state, {
            ...action.data.Project,
            isFetching: false,
        });
    default:
        return state;
    }
};

export const form = formReducer;

Это соединение ProjectFormкомпонент для формы:

import { connect } from 'react-redux';
import ProjectFormUi from './ProjectFormUi';
import actions from '../../redux/actions';
import { load as loadAccount } from './account'

export const ProjectForm = connect(
    (state) => {
        return {
            initialValues: state.Project,
        };
    },
    (dispatch) => {
        return {
            loadProject(id) {
                dispatch(actions.loadProject(id));
            },
            onSubmit(data) {
                dispatch(actions.sendingProject(data));
            },
        };
    },
    {
        load: loadAccount,
    }
)(ProjectFormUi);

export default ProjectForm;

И, наконец, фактический компонент формы, ProjectFormUi.

import React from 'react';
import { Field, reduxForm } from 'redux-form';

class ProjectFormUi extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    componentDidMount() {
        this.props.loadProject(1);
    }

    static getDerivedStateFromProps(newProps, prevState) {
        return newProps != prevState ? newProps : null;
    }

    componentDidUpdate(prevProps) {
        if (this.props.Project !== prevProps.Project) {
            this.setState({
                isFetching: this.props.Project.isFetching,
            });
        }
    }

    render() {
        const { handleSubmit, load, pristine, reset, submitting } = this.props;
        return (
            <form onSubmit={handleSubmit}>
                <div>
                    <label>First Name</label>
                    <div>
                        <Field name="title" component="input" type="text" placeholder="First Name" />
                    </div>
                </div>

                <div>
                    <button type="submit" disabled={submitting}>
                        Submit
                    </button>
                    <button type="button" disabled={pristine || submitting} onClick={reset}>
                        Undo Changes
                    </button>
                </div>
            </form>
        );
    }
}

export default reduxForm({
    form: 'ProjectForm',
    enableReinitialize: true,
})(ProjectFormUi);

Как я уже сказал, в настоящее время я загружаю данные в компонент connect ProjectForm с:

loadProject(id) {
    dispatch(actions.loadProject(id));
},

, который вызывается из componentDidMount в ProjectFormUi компоненте.Но я хотел бы понять, как загрузить данные, как в документах , установив

{ 
    load: loadAccount 
}

в компоненте connect ProjectForm.