以Redux格式

Question

我正在使用React和Redux，并且我在表单中使用Redux-form。

我正在尝试从数据库中加载一些初始数据。在docs中，建议使用

{ 
    load: loadAccount 
}

在connect组件中，但是我正在努力正确地设置它。

我可以用不同的方式加载初始数据：添加调度动作以连接组件并从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);

正如我所说，目前我正在使用以下命令在连接ProjectForm组件中加载数据：

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

，它是从componentDidMount组件中的ProjectFormUi调用的。 但我想了解如何像docs那样设置设置，加载数据

{ 
    load: loadAccount 
}

在连接ProjectForm组件中。