Question

子组件具有以下按钮代码：

// SelectDonation.js
          <button
            onClick={(e) => {
              e.preventDefault();
              this.props.testThunk();
              console.log(store.getState());
            }}
          >Test thunks</button>

this.props.testThunk()不会更新状态对象。我像这样连接Redux Thunk：

// reducer.js
import ReduxThunk from "redux-thunk";

const starting_state = {
  log_to_console : 0,
  donation_amount : 12,
  checkoutStep : 'selectDonation',
};

const reducer = (previous_state = starting_state, action) => {
  switch (action.type) {
    case 'thunkTest':
      return {
        ...previous_state,
        redux_thunk_test_var : action.payload
      };
    default:
      return previous_state;
  }
};

export default createStore(reducer, starting_state, applyMiddleware(ReduxThunk));

我希望新的状态属性redux_thunk_test_var以状态显示，但不会onClick。我的确在控制台中看到了带有初始状态的状态变量。

我没有正确传下撞球吗？这是App.js

// App.js
          {this.props.checkoutStep === checkoutSteps.selectDonation &&
           <SelectDonation
            dispatch_set_donation_amount = {this.props.dispatch_set_donation_amount}
            dispatchChangeCheckoutStep={this.props.dispatchChangeCheckoutStep}
             {...this.props}
           />
          }         
          </Modal>
        </header>
      </div>
    );
  }
}

const map_state_to_props = (state) => {
  return {
    log_prop : state.log_to_console,
    donation_amount : state.donation_amount,
    checkoutStep : state.checkoutStep,
  }
};

const map_dispatch_to_props = (dispatch, own_props) => {
  return {
    dispatch_set_donation_amount : amount => dispatch(set_donation_amount(amount)),
    dispatchChangeCheckoutStep : newStep => dispatch(changeCheckoutStep(newStep)),
    dispatchUpdateStateData : (stateData, stateVariable) => (dispatch(updateStateData(stateData, stateVariable))),
    testThunk
  }
};

动作重击：

// actions.js
export const testThunk = () => {
    const testDelay = setTimeout(() => 'Set Timeout done', 2000);
  return (dispatch) => {
    testDelay.then((data) => dispatch({
      type: 'thunkTest',
      payload: data })
    )
  }
};

Answer 1

您需要分发 testThunk()操作创建者的结果。现在，您只是返回它，而没有调用dispatch(testThunk())。

请参见this gist comparing syntaxes for dispatching，以帮助您更好地理解问题。

解决此问题的最佳方法是使用the "object shorthand" form of mapDispatch。作为其中的一部分，我建议更改属性名称以删除单词“ dispatch”，这使您可以使用更简单的ES6对象文字语法：

const map_dispatch_to_props = {
    set_donation_amount,
    changeCheckoutStep,
    updateStateData,
    testThunk,
};

Answer 2

conponentDidMount() {
  this.props.testThunk();
}

const map_dispatch_props = {
  testThunk
}


//action creator 

const fetch = (data) => ({
  type: 'thunkTest',
  payload: data
})


const fakeFetch = () => new Promise((resolve, reject) => setTimeout(() => resolve('Set Timeout done'), 2000));

export const testThunk = () => (dispatch) => fakeFetch.then(data => dispatch(fetch(data)))

Redux Thunk静默无法更新状态

2 个答案: