Отправки происходят, но магазин обновляется лишь частично

Question

Я пытаюсь обновить состояние пользователя для потока входа в систему. Пользователь является частью rootReducer. Сессия тоже есть, но редуктор этого состояния принадлежит библиотеке redux-response-session.

Мой процесс входа: пользователь посещает страницу, вводит имя пользователя и пароль. Пользователь нажимает кнопку формы входа в систему. При отправке сеанс вызывает сервер и выполняет вход пользователя. Во время процесса входа выполняется диспетчеризация состояния пользователя.

Но после его выполнения состояние пользователя остается тем, что было раньше. Войти явно удалось. Таким образом, состояние сеанса заполняется новыми данными, а состояние пользователя - нет. Журналы повсюду показывают, что был вызван userReducer и что возвращаемое им состояние соответствует ожиданиям. Есть какой-то особый способ подключить userReducer к магазину или обновить его? Код ошибки ниже.

В документации, которую я обнаружил, не показано, нужно ли обрабатывать хранилища rootReducer иначе, чем некомбинированные хранилища. Кроме того, поток входа в систему использует одну и ту же функцию для отправки двух действий, поэтому проблема должна быть где-то в userReducer или действии.

Edit: предоставленный код переходит в регистр по умолчанию, когда он попадает в userReducer. Я подтвердил это, установив для случая по умолчанию другое значение электронной почты. Почему userReducer не принимает тип действия, возвращаемый UserActions # userAdd? И в какой момент вызывается userReducer?

Edit2: отладчик, помещенный в userReducer, показывает, что действие отправки сначала достигает 'ADD_USER' и возвращает нужный объект, но выполняет отправку несколько раз сразу после этого и каким-то образом сбрасывает состояние пользователя только между загрузкой другой страницы. Это нормальное поведение?

//rootReducer.js
const reducers = {
  user: userReducer,
  session: sessionReducer
};

const rootReducer = combineReducers(reducers);




//userReducer.js
function userReducer(state = { email: '', projects: [] }, action) {
  switch (action.type) {
    case 'ADD_USER':
      return Object.assign({}, state, action.user);
    case 'LOGOUT_USER':
       return {email: '', projects: [] };
       case 'EDIT_USER':
         return { email: '', projects: [] };
    case 'DELETE_USER':
      return { email: '', projects: [] };

    default:
      return state;
  }
}

export default userReducer;




//LoginContainer.js
//this component calls the failing dispatch
//dispatch is default provided dispatch from connect function
import { connect } from 'react-redux';
import * as sessionActions from '../actions/SessionActions';
import * as userActions from '../actions/UserActions';

...
onSubmit = (e, history) => {
    e.preventDefault();

    this.props.dispatch(sessionActions.login(this.state, history, this.props.dispatch, userActions.addUser))

    //addUser({email: this.state.email, projects: []});
  }
...
export default connect(null)(LoginContainer);





//SessionActions.js
//failing code lives here:
//dispatch(addUser(json)); seems to fail somehow
//even though flow is basically the same as session
export const login = (state, history, dispatch, addUser) => {
  return () => {
    return sessionApi.login(state).then(response => response.json()).then(json => {
      sessionService.saveSession({ json })
      .then(() => {

        sessionService.saveUser(json)
        .then(() => {
          if (json.email) {
            console.log(state);
            console.log(json);

            dispatch(addUser(json));
            localStorage.setItem("loggedIn", true);
            localStorage.setItem("user", JSON.stringify(json.email));
            history.push('/');
            //history.go(0);
          }
        }).catch(err => console.error(err));
      }).catch(err => console.error(err));
    });
  };
};




//UserActions.js
export const addUser = (user) => {
  console.log(user);
  return {type: 'ADD_USER', user }
}

Answer 1

Я разобрался. Проекту требуется redux-persist, чтобы данные состояния переходили с одной страницы на другую. Состояние сеанса имеет свою собственную обработку для этой функции.

Код для реализации с помощью combReducers и redux-response-session и redux-thunk ниже. Я все еще работаю над уточнением уровня слияния.

$ npm install redux-persist

//configureStore.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import { sessionService } from 'redux-react-session';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'; // defaults to localStorage for web

import rootReducer from './rootReducer';

const persistConfig = {
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export let store = createStore(persistedReducer, applyMiddleware(thunk));
sessionService.initSessionService(store);
export let persistor = persistStore(store);