reactjs - redux 调度完成后调用函数

Question

一切都在它周围，但不完全是因为我对redux-thunk有足够的了解。和 react-router但我不明白这个看似简单的想法:

通过 <Route/> 以编程方式调用路线更改的history.push('/')操作完成发送到商店后，按下按钮时就会发生这种情况。

const LoggerRedux = ({stateProp, LogIn}) => {
    return(
      <div>
        <h2>Here is the button. Use this to login</h2>
        <Route render={({ history}) => (
          <button
            type='button'
            onClick={

            //Something that calls {LogIn}
            //and then the history.push('/')

            }
            >
            Log yo Arse Inn
          </button>
        )}>

        </Route>
      </div>
    )
}

const mapStateToProps = (state) => {
  return {
    stateProp : state
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    LogIn : () => dispatch({
      type : 'AUTHENTICATE'
    }),
    LogOut : (bool) => dispatch({
      type : 'LOGGED_OUT',
      bool
    })
  }
}
const LoginConn = connect( mapStateToProps, mapDispatchToProps)(LoggerRedux);

我提到/标记的所有内容的外行解释和示例也很好

Answer 1

让你的 Action 创建者返回一个 promise 。这样，当您调用它时，您可以使用 .then() 并在 then 处理程序中将新地址推送到历史记录中。

Thunk 会正常返回函数，但 Promise 的不同之处在于你可以在完成后执行操作。

示例:

static myActionCreator(somevar) {
  return dispatch => {
    return new Promise((resolve, reject) => {
      dispatch({
        type: "myaction",
        something: somevar
      });

      resolve()
    });
  }
}

所以在这种情况下，你的 thunk 返回一个 promise 。然后当你像这样调用时:

this.props.myActionCreator(somevar)
.then(() => {
  this.props.history.push('/winning')
})

这个 thunk 只是分派(dispatch)一个操作，但是您可以在其中进行一些具有回调等的异步调用，并在完成时解析。