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

假设有以下组件文件

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);

从“React”导入React；
从'react apollo'导入{graphql}；
从'react redux'导入{connect}；
从“react redux Form”导入{actions，Control，Form}；
从“重新组合”导入{compose，withProps}；
从“/HelloForm.gql”导入查询；
const passThrough=fn=>BaseComponent=>props=>{
fn（道具、基本部件）；
返回基本组件（道具）；
};
导出常量HelloForm=（{onSubmitEventHandler}）=>
名称
打招呼
;
export const enhance=compose(
connect（），
用道具({
onSubmitEventHandler:（{name}）=>{
window.alert（`Hello，${name}`）；
},
}),
graphql（查询），
直通（{data，dispatch，loading}）=>{
如果（！加载）{
分派（actions.load（'forms.hello'，data））；
}
}),
);
导出默认增强（HelloForm）；

这似乎可以按预期工作，但会收到以下警告：

警告：

setState（…）

：无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）。渲染方法应该是道具和状态的纯函数；构造函数的副作用是一种反模式，但可以移动到

componentWillMount

但是，建议在

componentDidMount

生命周期事件期间分派操作（可通过功能组件完成）。但是没有为

组件didmount

事件处理程序提供任何道具

---

“异步”向Redux分派操作的正确方法是什么？

解决方案确实是使用高阶组件。但是，不能使用箭头功能。更新后的

enchance

高阶组件应按如下方式实现：

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));
            }
        },
    }),
);

---

解决方案确实是使用高阶分量。但是，不能使用箭头功能。更新后的

enchance

高阶组件应按如下方式实现：

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));
            }
        },
    }),
);

---

检查是否有重演传奇。“我想这可能会对你有所帮助。”利勒泽克，如果我理解正确的话，我们仍然需要以类似的方式向Redux发送一个动作。是的，当然。如果使用Redux，您将无法避免分派操作。传奇帮助你使Redux“不那么纯粹”。检查Redux传奇。“我想这可能会对你有所帮助。”利勒泽克，如果我理解正确的话，我们仍然需要以类似的方式向Redux发送一个动作。是的，当然。如果使用Redux，您将无法避免分派操作。传奇帮助你让Redux“不那么纯洁”。