ReactJS

Question

我是 React 的新手，发现很难完成 Thunk。我已经阅读了一些问题和指南，但无法正确理解它。

我知道我必须连接，但我完全迷路了。请帮忙

单次调度工作正常，但双次调度根本不起作用。没有打印日志。

handleSubmit(event)
{
    event.preventDefault();
    this.isLoading = true;

    // TWO EVENTS needed, first to add new player and then set as bowler
    if (this.state.showAddBowlerTextfield) {

        utilPostJSON(jsonURL + 'add-player.php', {
            name: this.state.bowlerName,
            matchId: this.currState.matchId,
            inningsId: this.currState.inningsId,
            teamId: this.currState.teamBowling.id,
            isBowler: true
        })
            .then((response) => {
                console.log('Success', response);

                this.setState({
                    bowlerId: response.data.id,
                    bowlerName: response.data.name,
                });

                this.dispatchAddPlayerAndAddBowler();
            })
            .catch((error) => {
                console.error('Error', error);
            });

        return
    }


    // This needs only one dispatch
    const {store} = this.context;
    this.currState = store.getState();

    store.dispatch({
        type: constants.NEW_BOWLER,
        payload: this.state
    });

    this.props.parentClose();
}

//This function sends two dispatches
dispatchAddPlayerAndAddBowler()
{
    console.log('dispatchAddPlayerAndAddBowler');

    return (dispatch, getState) => {
        const {store} = this.context;
        console.log('Store', store);

        store.dispatch({
            type: constants.NEW_PLAYER_BOWLER,
            payload: this.state
        });
        store.dispatch({
            type: constants.NEW_BOWLER,
            payload: this.state
        });
    }
}

日志输出为：

Success {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
dispatchAddPlayerAndAddBowler

Answer 1

你用错了thunks。尝试重构 dispatchAddPlayerAndAddBowler：

dispatchAddPlayerAndAddBowler() {
  console.log('dispatchAddPlayerAndAddBowler');

  return (dispatch, getState) => {
    // Wrong: const {store} = this.context;
    // you don't need to do this dispatch is already there in the first parameter

    dispatch({
        type: constants.NEW_PLAYER_BOWLER,
        payload: this.state
    });

    dispatch({
        type: constants.NEW_BOWLER,
        payload: this.state
    });
  }
}

您还应该使用 connect 和 mapDispatchToProps 作为 handleSubmit

ReactJS - Thunk - 一个接一个地同步调度 2 个事件不起作用

ReactJS - Thunk - Dispatch 2 events in sync one after another not working

redux-thunk