Javascript 如何将redux thunk动作创造者变成承诺？

我有以下异步操作创建者（使用redux thunk）：

但是，我需要这个操作来返回一个承诺，因为我需要等待它在我的一个组件中完成，然后再执行其他操作（有关我的问题的更详细描述，请参阅）

我怎样才能把这个行动变成承诺，并且仍然使用redux thunk？先谢谢你

编辑：

---

我知道我正在尝试将输入字段的状态保存在组件的本地，即不保存在Redux中。这是因为如果将输入字段的值直接绑定到redux存储，它将不再可编辑。但是，我希望用户能够编辑输入字段，然后在提交时将编辑后的值保存到我的redux存储中。如果我直接绑定，用户将无法更改值/编辑。

我认为您误解了通过redux的数据流。我假设，当您想将操作转化为承诺时，您希望在redux状态更新时解决该承诺-您的另一个问题似乎就是这样。这通常不是redux的设计工作方式

当您发送动作时，存储将被更新，然后来自存储的组件中的道具将更新。您所需要做的就是在组件中使用这些道具，每当道具更新时，组件也会更新

在最初的问题中，您的代码是：

onSubmit(e) {
  e.preventDefault();
  this.props.nextSentence(); //this is async

  this.setState({ //this is not yet updating with the right values then
      inputField: this.props.activePupil.name
  });
}

您遇到的问题是，

active瞳孔

是redux存储的一部分，但您也试图将其存储在组件的状态中。这是一个坏主意，因为你的州不再有一个单一的真相来源

更好的方法是在任何需要的地方使用

this.props.activepullow

，例如

 render() {
     return (
        <span>{this.props.activePupil.name}</span>
     );
 }

编辑1 在下面的问题中，需要考虑正确的方法，但我认为我已经找到了一种合理的方法来实现它，同时保持数据完整性。它确实涉及将表单输入保存在您的商店中，这不是每个人都喜欢的，但对我来说不是问题

无论如何。。。我们需要另一个减速机来处理用户输入-它将非常简单，并响应两个操作-您已经拥有的“UPDATE\u ACTIVE”操作和“NAME\u UPDATED”操作：

然后我们需要一个简单的动作创建者：

const inputChanged = updatedName => ({
     type: 'NAME_UPDATED',
     payload: { updatedName }
});

现在在我们的组件中，我们将使用新创建的state和action creator来管理我们的输入（只是像往常一样连接它们）——这里缺少很多代码，但应该有足够的代码来理解

class Whatever extends React.Component {
    constructor() {
        super();
        this.handleChange= this.handleChange.bind(this);
    }

    handleChange(event) {
        this.props.inputChanged(event.target.value);
    }

    render() {
        return (
            <input type="text" value={this.props.updatedName} onChange={this.handleChange} />
        );
    }
}

---

这是一个解释得很好的答案，干得好：）非常感谢你详尽的回答！我的问题是，当我直接使用

this.props.active瞳孔.name

时，用户将无法编辑它，因为它将绑定到redux存储的值。但我希望用户能够更改输入字段的值并将其保存在存储中。这就是为什么我在两者之间设置输入字段的状态，并将存储的值放入输入字段中，然后在提交时再次将其保存到存储。还是我严重误解了？谢谢！它真的非常有用！我已经为此挣扎了好几天了。我更新了我的问题，把重点更多地放在可编辑文本字段的问题上。我进行了一番思考，以确定最佳方法，但我现在更新了我的答案。

const updatedName = (state = '', action) => {
  switch (action.type) {
    case 'UPDATE_ACTIVE':
        return action.payload.name;
    case: 'NAME_UPDATED':
        return action.payload.updatedName;
    default:
        return state;
  }
};

const inputChanged = updatedName => ({
     type: 'NAME_UPDATED',
     payload: { updatedName }
});

class Whatever extends React.Component {
    constructor() {
        super();
        this.handleChange= this.handleChange.bind(this);
    }

    handleChange(event) {
        this.props.inputChanged(event.target.value);
    }

    render() {
        return (
            <input type="text" value={this.props.updatedName} onChange={this.handleChange} />
        );
    }
}

class Whatever extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            updatedPupilName: props.activePupil.name
        };
        this.handleChange= this.handleChange.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.activePupil.name !== this.props.activePupil.name) {
            this.setState({
                updatedPupilName: nextProps.activePupil.name
            });
        }
    }

    handleChange(event) {
        this.setState({
            updatedPupilName: event.target.value
        });
    }

    render() {
        return (
            <input type="text" value={this.state.updatedPupilName} onChange={this.handleChange} />
        );
    }
}