Redux-thunk - dispatch不是一个函数

时间:2017-01-24 11:50:59

标签: reactjs redux react-redux redux-thunk

我在使用redux-thunk时遇到了麻烦。它说调度不是我的动作创建者中的一个函数,我试着安慰返回的参数而没有。

以下是代码:

动作

UIScrollView

mapActionsToProps

export function signUp(data) {
  return dispatch => {
    console.log(dispatch)
    if (data.email === 'email@server.com') {
      dispatch(signIn(data, () => {
        if (data.type === '2') {
          browserHistory.push('/settings/profile')
        } else {
          browserHistory.push('/')
        }
      }))
    } else {
      return {
        type: ActionTypes.USER_SIGN_UP__ERROR
      }
    }
  }
}`

顺便说一下,你可以看到我在mapActionsToProps中安装了dispatch函数,并且它按原样返回:

const mapActionsToProps = dispatch => ({
  signUp (data) {
    console.log(dispatch)
    dispatch(userActions.signUp(data))
  }
})

1 个答案:

答案 0 :(得分:1)

Dispatch不是一个函数,因为它不是从动作创建者传递的。

此外,您不应在mapActionsToProps中发送任何操作。您只需将它们绑定为可由连接组件访问。

您的mapActionsToProps

const mapActionsToProps = (dispatch) => {
  return {
    asyncAction: bindActionCreators(asyncAction, dispatch),
  }
}

const Container = connect(mapStateToProps, mapActionsToProps)(Component);

异步行动

export const asyncAction = (email) => {
  return (dispatch, getState) => {

    const state = getState();

    dispatch(StartAsync());

    return fetch(`${apiUrl}/endpoint?email=${email}`, {
      method: 'GET'
    })
        .then(response => response.json())
        .then((result) => dispatch(finishedAsync(result)),
              (error) => dispatch(failedAsync(error)))
        .catch(e => {
          console.log('error:', e);
        });
  };
};

然后,在您连接的组件中,您可以从props调度此操作。