reactjs – 从redux发送完成后的调用函数

发布时间：2020-12-15 05:06:28 所属栏目：百科来源：网络整理

导读：在它周围,但不是因为我有足够的想法redux-thunk和react-router但我没有得到这个看似简单的想法：在动作完成调度到商店后,通过 Route /的history.push(‘/’)以编程方式调用路径更改,这在按下按钮时发生. const LoggerRedux = ({stateProp,LogIn}) = { retur

在它周围,但不是因为我有足够的想法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解释和我提到/标记的所有事情的例子也很好

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

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

例：

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

      resolve()
    }
  }
}

所以在这种情况下,你的thunk会返回一个promise.然后当你这样调用时：

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

这个thunk只是调度一个动作,但是你可以在那里有一个具有回调等的异步调用,并且你在完成时就解决了.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!