React Redux Action Payload возвращает неопределенное значение

Question

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

Я следовал курсу Стивена Гридера в качестве шаблона, и его секция сообщений работала с использованием точно такого же шаблона, который применялся для входа в систему. Избыточное обещание правильно подключено в промежуточном программном обеспечении.

package.json (частично)

"react": "^16.2.0",
"react-redux": "^5.0.7",
"redux": "^3.7.2",
"redux-form": "^7.2.3",
"redux-forms": "^1.0.0-3",
"redux-promise": "^0.5.3",

LoginComponent:

function mapStateToProps(state){
  return {
    profile:state.profile
  };
}

export default reduxForm({
  validate,
  form:'PostsNewForm'
})(
  connect(mapStateToProps,{login})(Login)
);

действия профиля

export const profileActions = {
    login:'uaLogin',
    logout:'uaLogout',
    register:'uaRegister',
    getAll:'uaGetAll',
    getOne:'uaGetOne',
    delete: 'uaDelete'
};

const pa=profileActions;

export function login(values, callback){
  const request=axios.post(`/api/authenticate`,values)
    .then ((res)=> {
      console.log ('*** action:',res.data);//res.data  correctly appears
      callback()
    });
  return {
    type: pa.login,
    payload:request
  }
}

Редуктор-профиль

import {profileActions as pa} from '../actions';

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

export default function authentication(state = initialState, action) {
  switch (action.type) {
    case pa.login:
      console.log('***reducer',action.payload.data);//action.payload is undefined
      return {
        action.payload.data 
      };
    default:
      return state
  }
}

Answer 1

Ошибка происходит, потому что оператор.then присоединяется непосредственно к запросу const. Это разрешает обещание и изменяет запрос на неопределенный.

Изменить это:

const request=axios.post(`/api/authenticate`,values)
  .then ((res)=> {
  console.log ('*** action:',res.data);//res.data  correctly appears
  callback()
});

К этому:

const request=axios.post(`/api/authenticate`,values);

вторая проблема заключается в том, что я пытаюсь выполнить действие в форме через запасной вариант и забывать парадигму реакции и редукции; обратный вызов в этом случае не нужен.

вместо этого я должен посмотреть на componentDidMount или, возможно, componentWillMount и проверить состояние, чтобы решить, следует ли перемещаться.

Answer 2

Есть некоторые исправления:

1. логин asynchronous action.user redux-thunk или же redux-saga для отправки асинхронного действия.

2. Учитывая вышеприведенный пункт, правильная подпись для действий входа.

export function login(values, callback) { return function (dispatch) { const request = axios.post( / API / Аутентифицировать , values) .then((res) => { console.log('*** action:', res.data);//res.data correctly appears callback(); //dispatch anothe action inside the async action.
dispatch({ type: pa.login, payload: res.data }); }); } }