React Redux Thunk 在 Action Creator 中传递 This.Props 方法答案

【问题标题】：React Redux Thunk Pass This.Props Methods in Action CreatorReact Redux Thunk 在 Action Creator 中传递 This.Props 方法
【发布时间】：2020-02-05 09:45:06
【问题描述】：

我正在使用带有 Redux 的 react-stepzilla 反应，Redux-thunk 问题是我想在动作创建器中使用 jumpToState(n) 方法。但我无法在 redux action creator 文件中访问此方法。

动作文件

export const checkUser = (username) => {
    return (dispatch,getState)=>{
      wApi({user:username}).then(response => {
           dispatch({
              type: ActionTypes.CHECK_USER_NAME,
              payload:response
           })
           e.jumpToStep(1);//Here it is Stepzilla Method 
        }).catch(err => {})

      }
  }

getState() 方法只提供我在 reducer 中声明的状态值。 console.log(getState)

userdetail:{
       username:"USER1001"
       usertype:"SUPER"
       isactive:"YES"
    }

减速器文件

const defaultState={
    userdetail:{
       username:""
       usertype:""
       isactive:""
    }
}
const reducer =(state=defaultState,action)=>{
    switch (action.type) {
        case ActionTypes.CHECK_USER_NAME :
          {
            return {
              ...state,
              userdetail:action.payload,
            }
          }
        default:
          return state
      }
}
export default reducer;

CheckUserName.js 文件代码

componentWillMount() {
        this.props.checkUser("USER1001")
        //console.log(this.props)
        //{Here in console Output i can see "jumpToState"  method in this.props}
        //this.props.jumpToStep(1);
      }

我通过将整个 this.props 传递给动作创建者方法来找到解决方案。

this.props.checkUser("USER1001",this.props)

我想问有没有其他方法可以实现这一点。我是新来的反应

【问题讨论】：

标签： redux react-redux react-thunk

【解决方案1】：

来自 react-stepzilla 的文档：

stepzilla 将一个名为 jumpToStep 的实用程序方法作为道具注入到所有反应步骤组件中

因为它是你的道具中的正常功能，你可以将它作为参数传递给你的动作创建者并在那里使用它。不需要传递整个this.props。

this.props.checkUser("USER1001", this.props.jumpToStep)

export const checkUser = (username, jumpToStep) => {
    return (dispatch,getState)=>{
      wApi({user:username}).then(response => {
           dispatch({
              type: ActionTypes.CHECK_USER_NAME,
              payload:response
           })
           jumpToStep(1);//Here it is Stepzilla Method 
        }).catch(err => {})

      }
  }

【讨论】：