React Redux Thunk Pass This.Props Methods in Action Creator

Question

I am using react with react-stepzilla with Redux , Redux-thunk the problem is i want to use jumpToState(n) method inside action creator. but i am not able to access this method inside redux action creator file.

Action File

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() method only providing me state value which i declared in reducer. console.log(getState)

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

Reducer File

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 File Code

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

I find the solution by passing whole this.props to action creator method.

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

i want to ask there is any alternate method for achieving this. i am new to react

score 0 · Answer 1 · answered Oct 08 '19 at 08:32

From the documentation of react-stepzilla:

stepzilla injects an utility method called jumpToStep as a prop into all your react step components

As it is normal function in your props, you can pass it to your action creator as an argument and use it there. Passing the whole this.props is not necessary.

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 => {})

      }
  }

React Redux Thunk Pass This.Props Methods in Action Creator

1 Answers1