React Redux action полезные данные не определены - PullRequest
Новая
       11

React Redux action полезные данные не определены

0 голосов
/ 12 апреля 2019

Я пытаюсь настроить аутентификацию для своего приложения.Данные возвращаются axios, и полезная нагрузка действия вызывается правильноПроблема возникает, когда я пытаюсь получить доступ к данным, содержащимся в полезной нагрузке.Возвращает неопределенное значение.

Компонент входа с помощью формы-редукса: 

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

I 'Я хотел бы установить логин и полномочия для данных, поступающих из полезной нагрузки, но не может получить доступ к данным внутри него.¿Что мне не хватает?

Ответы [ 2 ]

0 голосов
/ 12 апреля 2019

Форма Redux имеет функцию onSubmit, которая выполняет действие напрямую https://redux -form.com / 8.1.0 / примеры / remotesubmit / 

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

Затем оберните внутри формы Redux 

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

Проверьте в Redux Debugger, вы должны увидеть избыточную форму записи данных Также не забудьте передать редуктор формы в ваш магазин, как указано здесь https://redux -form.com / 8.1.0 / docs / gettingstarted.md / 

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`
})
0 голосов
/ 12 апреля 2019

Что вы регистрируете в actioncreator после const req = await HTTP.get("account");?

...