从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);

Layman解释和我提到/标记的所有事情的例子也很好

Answer 1

让你的行动创造者回复承诺.这样当你调用它时,你可以使用.then(),然后在你的处理程序中你可以将一个新地址推送到历史记录中.

Thunks将正常返回函数,但承诺的不同之处在于您可以在完成后执行操作.

例:

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只是调度一个动作,但是你可以在那里有一个具有回调等的异步调用,并且你在完成时就解决了.