1

我正在使用带有 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 中声明的状态值。控制台.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)

我想问是否有任何替代方法可以实现这一目标。我是新来的反应

4

1 回答 1

0

从 react-stepzilla 的文档中：

stepzilla 将一个称为jumpToStepprop 的实用程序方法注入到所有反应步骤组件中

由于它是你的道具中的正常功能，你可以将它作为参数传递给你的动作创建者并在那里使用它。通过整体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 => {})

      }
  }
于 2019-10-08T08:32:20.223 回答