Данные текущего пользователя после входа в React-Redux

Question

Я работаю в системе аутентификации в React-Redux. После успешного входа в систему я хочу сохранить текущие данные. Я не могу сделать это правильно.

КОД ДЕЙСТВИЙ:

// ** LOGIN USER **
export const login = ({ email, password }) => (dispatch) => {
  const body = JSON.stringify({ email, password });

  axios
    .post('/login', body, getHeaders())
    .then(console.log(body))
    .then((res) => {
      dispatch({
        type: LOGIN_SUCCESS,
        payload: res.data,
      });

      history.push('/');
    })
    .then(() => {
      dispatch({
        type: USER_LOADED,
      });
    })

    .catch((err) => {
      console.log(err);
      dispatch(returnErrors(err.message, err.id, 'LOGIN_FAIL'));
      dispatch({
        type: LOGIN_FAIL,
      });
    });
};

Как сохранить пользовательские данные в типе USER_LOADED? Он работает только до первой перезагрузки.

КОД СНИЖЕНИЯ:

const initialState = {
  token: localStorage.getItem('token'),
  isAuthenticated: null,
  isLoading: false,
  user: null,
  profileInitialized: false,
  profileData: null,
};

export default function (state = initialState, action) {
  switch (action.type) {
    // USER AUTHENTICATION
    case USER_LOADING:
      return {
        ...state,
        isLoading: true,
      };
    case USER_LOADED:
      return {
        ...state,
        ...action.payload,
        isAuthenticated: true,
        isLoading: false,
      };
    case LOGIN_SUCCESS:
    case REGISTER_SUCCESS:
      localStorage.setItem('token', action.payload.token);
      return {
        ...state,
        ...action.payload,
        isAuthenticated: true,
        isLoading: false,
      };
    case AUTH_ERROR:
    case LOGIN_FAIL:
    case LOGOUT_SUCCESS:
    case REGISTER_FAIL:
      localStorage.removeItem('token');
       +++

Я должен добавить, что JWT остается после перезагрузки таким образом, пользователь подключен, но имя пользователя не указано, например.

Сразу после перенаправления входа в систему

После перезагрузки

I знаю, что код

 .then(() => {
      dispatch({
        type: USER_LOADED,
      });
    })

неверен, но я не знаю, как заставить его работать

Answer 1

Я предполагаю, что пользовательские данные от POST /login. Если это так, я думаю, вам нужно сначала удалить .then(console.log(body)), так как он не возвращает ответ на следующую функцию .then. Кроме того, вам нужно вернуть данные пользователя по цепочке обещаний. Я надеюсь, что это помогает.

axios
  .post('/login', body, getHeaders()) 
  .then((res) => {
  dispatch({
    type: LOGIN_SUCCESS,
    payload: res.data,
   });

   history.push('/');

   return res.data; // pass the user data down to the promise chain
}).then((user) => {
  dispatch({
    type: USER_LOADED,
    payload: user
   });
})

РЕДАКТИРОВАТЬ

На основе комментария в исходном вопросе. Вопрос в том, чтобы сохранить данные в браузере и вернуть их обратно при срабатывании USER_LOADED.

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

После вызова POST вы можете добавить информацию о пользователе из полезной нагрузки в локальное хранилище. Таким образом, он все еще будет доступен после обновления страницы sh.

axios
  .post('/login', body, getHeaders()) 
  .then((res) => {
  dispatch({
    type: LOGIN_SUCCESS,
    payload: res.data,
   });

   // I assume user data is part of the `POST /login` payload 
   localStorage.setItem('user', res.data.user)

   history.push('/');

   return res.data; // pass the user data down to the promise chain
})

Надеюсь, это ответит на ваш вопрос.