为什么在使用 thunk 时会以错误的顺序调用我的动作创建者？

Question

我正在尝试 redux-thunk 和动作创建者，并注意到一些我不理解的奇怪行为。当我调用动作创建器函数时，它们不会按照我希望的顺序调用。这是我的 App.js 组件

class App extends Component {

  handleSave = () => {

    this.props.postData({

      name:this.props.activity,

      type_name: this.props.type

    })

    this.props.fetchList()

    this.props.fetchData()

  }

  handleClick = () => {

    this.props.fetchData()

  }

  componentDidMount() {

    this.props.fetchData()

    this.props.fetchList()

  }

  render() {

    return (

      <div className="App">

        <Router>

          <Nav />

          <Route exact path='/' render={props => <Home {...props} clickProp={this.handleClick} saveProp={this.handleSave}/>} />

          <Route exact path='/activities' render={props => <ListContainer {...props} numItems={this.props.list.length} listProp={this.props.list}/>} />

        </Router>

      </div>

    );

  }

}

const mapStateToProps = state => {

  return {

    activity: state.activity,

    type: state.type,

    list: state.list

  }

}

const actions = {fetchData, fetchList, postData}

export default connect(mapStateToProps, actions)(App);

当我单击 Home 子组件中的按钮时，将调用 handleSave 函数，然后该函数应该将一个项目发布到我的列表中，然后获取更新的列表，以便它可以显示在我的列表中。当我这样做时， this.props.fetchList() 首先被调用，即使它是第二个被调用的函数。我在我的减速器中放置了一个 console.log(action) ，这就是打印的内容。

{type: "FETCH_LIST", payload: Array(86)}

{type: "POST_DATA", payload: {…}}

{type: "FETCH_DATA", payload: {…}}

我可以让 FETCH_LIST 在 POST_DATA 之后发生的唯一方法是如果我像这样第二次调用 fetch_data()

  handleSave = () => {

    // something weird going on here

    this.props.fetchList()

    this.props.postData({

      name:this.props.activity,

      type_name: this.props.type

    })

    this.props.fetchList()

    this.props.fetchData()

  }

如果可能的话，我真的希望能够让我的代码正常工作，而不必两次调用同一个函数。最后，这就是我的动作创建者的样子。

export default function fetchData() {

  return (dispatch) => {

    const url = 'http://www.boredapi.com/api/activity/'

    fetch(url)

      .then(res => res.json())

      .then(activity => { dispatch({type: "FETCH_DATA", payload: activity})})

  }

}

我唯一的猜测是，发生这种情况是因为这些操作是异步的。所以我也尝试改变这些函数的调用顺序，无论什么 FETCH_LIST 总是发生在 POST_DATA 之前。

Answer 1

您可以将这些操作创建者转换为async版本，然后您可以等待它们，以便它们按顺序执行。https://medium.com/@gaurav5430/async-await-with-redux-thunk-fff59d7be093例如在你的fetchDatafunction fetchData() {&nbsp; return async (dispatch) => {&nbsp; &nbsp; const url = 'http://www.boredapi.com/api/activity/'&nbsp; &nbsp; try{&nbsp; &nbsp; &nbsp; const res = await fetch(url)&nbsp; &nbsp; &nbsp; const activity = await res.json();&nbsp; &nbsp; &nbsp; dispatch({type: "FETCH_DATA", payload: activity})&nbsp; &nbsp; }&nbsp; &nbsp; catch (error) {&nbsp; &nbsp; &nbsp; console.log(error);&nbsp; &nbsp; }}一旦它们出现，async您就可以在您的中等待它们handleSave（一旦您将其转换为async），这将确保它们按顺序被调用。handleSave = async () => {&nbsp; &nbsp; await this.props.postData({&nbsp; &nbsp; &nbsp; name:this.props.activity,&nbsp; &nbsp; &nbsp; type_name: this.props.type&nbsp; &nbsp; })&nbsp; &nbsp; await this.props.fetchList()&nbsp; &nbsp; await this.props.fetchData()&nbsp; }