返回一个简单动作创建者的承诺，以使用react-redux做出反应

Question

我是react-redux的新手。在这里，我认为这是一个非常基本的问题。但是，我有一个动作创建者，并且我在使用redux thunk。export const updateActivePage = (activePage) => {  return {    type: UPDATE_ACTIVEPAGE,    payload: activePage  }}我试过的是export const updateActivePage = (activePage) => (dispatch) => {  return new Promise( function(resolve, reject) {    dispatch({      type: UPDATE_ACTIVEPAGE,      payload: activePage    })  })}之后的函数不会被调用。现在，在我componentdidmount要.then在此之后使用因此，我要为此答应。那么，我该怎么做呢？我正在使用reux-thunk

Answer 1

直接来自redux-thunk自述文件：

function makeASandwichWithSecretSauce(forPerson) {

  // We can invert control here by returning a function - the "thunk".

  // When this function is passed to `dispatch`, the thunk middleware will intercept it,

  // and call it with `dispatch` and `getState` as arguments. 

  // This gives the thunk function the ability to run some logic, and still interact with the store.

  return function (dispatch) {

    return fetchSecretSauce().then(

      sauce => dispatch(makeASandwich(forPerson, sauce)),

      error => dispatch(apologize('The Sandwich Shop', forPerson, error))

    );

  };

}

...

// It even takes care to return the thunk’s return value

// from the dispatch, so I can chain Promises as long as I return them.

store.dispatch(

  makeASandwichWithSecretSauce('My partner')

).then(() => {

  console.log('Done!');

});

Answer 2

当您想从外部源（例如REST）中获取某些数据时，会使用Promise。但是，如果您确实要执行此操作，则动作创建者必须返回一个函数：

export const updateActivePage = (activePage) => {

  return (dispatch) => {

    return dispatch ({

      type: UPDATE_ACTIVEPAGE,

      payload: activePage

    });

  }

}

这样的事情应该返回承诺。但是，将在分派操作时解决此承诺。它与redux状态更改不同。我认为您真的不想在这里使用promise。

如果要在redux状态发生变化时做出反应，则组件应观察状态（使用mapStateToProps），并且可以处理componentWillUpdate方法中的更改。