React-Redux Chrome Extension收到操作类型未定义的错误

时间:2018-08-15 13:09:52

标签: javascript reactjs redux react-redux

我们已使用react-chrome-redux在react-redux上构建了chrome扩展,请参见:https://github.com/tshaddix/react-chrome-redux

我正在尝试发送操作并进行http呼叫。我们正在使用axios。我们收到错误消息:Actions may not have an undefined "type" property

使用react-chrome-redux库软件包,有一个应该模拟thunk功能的调用dispatchResponder,但我不理解。我发送了动作,但持续收到未定义的动作类型错误,请参见:https://github.com/tshaddix/react-chrome-redux/wiki/Advanced-Usage#action-responses

这是组件中的分派。有一个handleChange函数可以通过一些验证来更新用户输入值(电子邮件,密码)的状态

handleLogin = (event) => {
  event.preventDefault();
  const { email, password } = this.state;

  if (email && password) {
    this.props.login(email, password);
  }
}

....

function mapDispatchToProps(dispatch) {
    return {
        login: function (email, password) {
            dispatch(login(email, password))
        }
    }
}

/**
 * @property {object} classes
 * @property {object} theme
 * @property {object} user - User logging in
 * @property {object} login - authentication attempt
 */
Login.propTypes = {
    classes: PropTypes.object.isRequired,
    theme: PropTypes.object.isRequired,
    user: PropTypes.object.isRequired,
    login: PropTypes.func.isRequired,
};

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles, { withTheme: true })(Login));

这是通过login触发的操作

export function login(email, password) {

  return dispatch => {
    dispatch(request(email));
    const data = { "email": email, "password": password };

    const login = axios({
      // make post request to auth service
    });

    login.then(
      response => {
        localStorage.setItem("user", JSON.stringify(response.data));
        dispatch(success(response.data));
      },
      error => {
        dispatch(failure(error));
        dispatch(alertActions.error(error.message));
      }
    );
  };

  function request(email) { return { type: types.LOGIN_REQUEST, email } }
  function success(user) { return { type: types.LOGIN_SUCCESS, user } }
  function failure(error) { return { type: types.LOGIN_FAILURE, error } }
}

还有我的减速器。将reducer正确导入到reducer / index.js文件中

import * as types from "../constants/constants";
import * as actions from "../actions/authActions";

let user = JSON.parse(localStorage.getItem('user'));
const initialState = user ? { loggedIn, user, loading } : {};

export default (state = initialState, action) => {
  switch (action.type) {

    case types.LOGIN_REQUEST:

      return {
        ...state,
        loading: true,
      };

    default:
      return state;
  }
};

0 个答案:

没有答案