Question

我正在尝试为我的应用设置身份验证。数据由axios返回，并且正确地调用了操作负载。当我尝试访问有效负载中包含的数据时，问题就来了。返回未定义。

使用redux形式登录组件：

class Signin extends Component {
  submit = values => {
    this.props.signInAction(values, this.props.history);
  };

  errorMessage() {
    if (this.props.errorMessage) {
      return <div className="info-red">{this.props.errorMessage}</div>;
    }
  }

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.submit)} className="formu">
        <div>
          <div className="inputf">
            <Field
              name="login"
              component="input"
              type="text"
              placeholder="Username"
            />
          </div>
        </div>
        <div>
          <div className="inputf">
            <Field
              name="password"
              component="input"
              type="password"
              placeholder="Password"
            />
          </div>
        </div>
        <div>
          <button className="bsignin" type="submit">
            Sign in
          </button>
          {this.errorMessage()}
        </div>
      </form>
    );
  }
}

function mapStateToProps(state) {
  return { errorMessage: state.auth.error };
}

const reduxFormSignin = reduxForm({
  form: "signin"
})(Signin);

export default connect(
  mapStateToProps,
  { signInAction }
)(reduxFormSignin);

动作创建者

export function signInAction({ login, password }, history) {
  return async dispatch => {
    try {
      const res = await HTTP.post(`authenticate`, {
        login,
        password
      });
      localStorage.setItem("token", res.data.token);
      const req = await HTTP.get("account");
      dispatch({
        type: AUTHENTICATED,
        payload: req.data
      });
      history.push("/");
    } catch (error) {
      dispatch({
        type: AUTHENTICATION_ERROR,
        payload: "Invalid userName or password"
      });
    }
  };
}

减速器

import {
  AUTHENTICATED,
  UNAUTHENTICATED,
  AUTHENTICATION_ERROR
} from "../actions";

const initialState = {
  login: "",
  authority: ""
};

export default function(state = initialState, action) {
  switch (action.type) {
    case AUTHENTICATED:
      //This console log works and returns the data
      console.log(action.payload);
      //Next console log returns payload is undefined
      //console.log(action.payload.login);
      return {
        ...state,
        authenticated: true,
        // login: action.payload.login,
        // authority: action.payload.authority
      };
    case UNAUTHENTICATED:
      return { ...state, authenticated: false };
    case AUTHENTICATION_ERROR:
      return { ...state, error: action.payload };
    default:
      return state;
  }
}

我想使用来自有效负载的数据设置登录名和权限，但是无法访问其中的数据。 ¿我想念什么？

Answer 1

在const req = await HTTP.get("account");之后您要登录actioncreator吗？

Answer 2

Redux Form具有onSubmit函数，该函数直接执行操作 https://redux-form.com/8.1.0/examples/remotesubmit/

<form onSubmit={handleSubmit} className="formu">

然后在Redux表单中包装

  const reduxFormSignin = reduxForm({
  form: "signin",
  onSubmit: signInAction
})(Signin);

在Redux调试器中检查，您应该看到redux表单记录数据另外请记住，如此处https://redux-form.com/8.1.0/docs/gettingstarted.md/

所述，将form reducer传递到您的商店

import { createStore, combineReducers } from 'redux'
import { reducer as formReducer } from 'redux-form'

const rootReducer = combineReducers({
  // ...your other reducers here
  // you have to pass formReducer under 'form' key,
  // for custom keys look up the docs for 'getFormState'
  form: formReducer`enter code here`
})

React Redux动作有效载荷数据未定义

2 个答案: