preloadedState - セッションの結果が別のレデューサーによって上書きされる

Question

ミドルウェアを使用してローカルストアから状態を回復するセッションレデューサー（redux-sessionライブラリーを使用）があります。デバッグツールから、これが意図したとおりに機能しているのがわかりますが、ユーザーの削減元の初期状態に置き換えられています。

私はpreloadedStateを使用する必要があると感じましたが、私は減速機の結果をcreateStoreに取得できませんか？

storedStateが正しく復元されています（コンソールにログオンできます）。

session: {user: {data: bhBSh}}, user: {data: null} 

ページがリロードされたときに「セッション」を「ユーザー」にコピーする最良の方法はありませんか？

セッションリデューサ：

function sessionReducer (state = {}, action) { 
    switch (action.type) { 
     case 'LOAD_STORED_STATE': 
      console.log(action.storedState); //Working!!!!! 
      return action.storedState; 
     default: 
      return state; 
    } 
} 

ユーザー減速：

import { fromJS } from 'immutable'; 

import { 
    USER_LOGGING_IN, 
    USER_LOGGED_IN, 
    USER_LOGGED_OUT, 
} from '../../constants'; 

const userInitialState = fromJS({ 
    data: null, 
    isLoading: false, 
}); 

function userReducer(state = userInitialState, action) { 
    switch (action.type) { 
     case USER_LOGGING_IN: 
      return state 
       .set('isLoading', true); 
     case USER_LOGGED_IN: 
      return state 
       .set('data', action.payload) 
       .set('isLoading', false); 
     case USER_LOGGED_OUT: 
      return userInitialState; 
     default: 
      return state; 
    } 
} 

export default userReducer; 

export default function createReducer(injectedReducers) { 
    return combineReducers({ 
     session: sessionReducer, 
     user: userReducer, 

    ...injectedReducers, 
    }); 
} 

configureStore：

export default function configureStore(history, session) { 
     session, 
    routerMiddleware(history), 
     thunkMiddleware 
    ]; 

    const enhancers = [ 
    applyMiddleware(...middlewares), 
    ]; 

    //compose enhancers removed for readability 

    const store = createStore(
    createReducer(), 
    //preloaded state?? 
    composeEnhancers(...enhancers) 
); 

    store.injectedReducers = {}; // Reducer registry 

    return store; 
}  

app.js

/** 
* app.js 
* 
* This is the entry file for the application, only setup and boilerplate 
* code. 
*/ 

// Needed for redux-saga es6 generator support 
import 'babel-polyfill'; 

// Import all the third party stuff 
import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { ConnectedRouter } from 'react-router-redux'; 
import FontFaceObserver from 'fontfaceobserver'; 
import createHistory from 'history/createBrowserHistory'; 
import { createSession } from 'redux-session'; 
import 'sanitize.css/sanitize.css'; 

// Import root app 
import App from 'containers/App'; 

// Import Language Provider 
import LanguageProvider from 'containers/LanguageProvider'; 

// Load the favicon, the manifest.json file and the .htaccess file 
/* eslint-disable import/no-webpack-loader-syntax */ 
import '!file-loader?name=[name].[ext]!./images/favicon.ico'; 
import '!file-loader?name=[name].[ext]!./images/icon-72x72.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-96x96.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-120x120.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-128x128.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-144x144.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-152x152.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-167x167.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-180x180.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-192x192.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-384x384.png'; 
import '!file-loader?name=[name].[ext]!./images/icon-512x512.png'; 
import '!file-loader?name=[name].[ext]!./manifest.json'; 
import 'file-loader?name=[name].[ext]!./.htaccess'; // eslint-disable-line import/extensions 
/* eslint-enable import/no-webpack-loader-syntax */ 

import configureStore from './configureStore'; 

// Import i18n messages 
import { translationMessages } from './i18n'; 

// Import CSS reset and Global Styles 
import './global-styles'; 

// Observe loading of Open Sans (to remove open sans, remove the <link> tag in 
// the index.html file and this observer) 
const openSansObserver = new FontFaceObserver('Open Sans', {}); 

// When Open Sans is loaded, add a font-family using Open Sans to the body 
openSansObserver.load().then(() => { 
    document.body.classList.add('fontLoaded'); 
},() => { 
    document.body.classList.remove('fontLoaded'); 
}); 

// Create redux store with history 
const history = createHistory(); 
const session = createSession({ 
    ns: 'test001', 
    selectState (state) { 
     return { 
      user: state.toJS().user 
     }; 
    } 
}); 

const store = configureStore(history, session); 
const MOUNT_NODE = document.getElementById('app'); 

const render = (messages) => { 
    ReactDOM.render(
    <Provider store={store}> 
     <LanguageProvider messages={messages}> 
     <ConnectedRouter history={history}> 
      <App /> 
     </ConnectedRouter> 
     </LanguageProvider> 
    </Provider>, 
    MOUNT_NODE 
); 
}; 

if (module.hot) { 
    // Hot reloadable React components and translation json files 
    // modules.hot.accept does not accept dynamic dependencies, 
    // have to be constants at compile-time 
    module.hot.accept(['./i18n', 'containers/App'],() => { 
    ReactDOM.unmountComponentAtNode(MOUNT_NODE); 
    render(translationMessages); 
    }); 
} 

// Chunked polyfill for browsers without Intl support 
if (!window.Intl) { 
    (new Promise((resolve) => { 
    resolve(import('intl')); 
    })) 
    .then(() => Promise.all([ 
     import('intl/locale-data/jsonp/en.js'), 
     import('intl/locale-data/jsonp/de.js'), 
    ])) 
    .then(() => render(translationMessages)) 
    .catch((err) => { 
     throw err; 
    }); 
} else { 
    render(translationMessages); 
} 

// Install ServiceWorker and AppCache in the end since 
// it's not most important operation and if main code fails, 
// we do not want it installed 
if (process.env.NODE_ENV === 'production') { 
    require('offline-plugin/runtime').install(); // eslint-disable-line global-require 
} 

Answer 1

redux-session docsからわかるように、保存された状態を復元するためにこのライブラリが実行しようとするのは、LOAD_STORED_STATEアクションをディスパッチすることだけです。アクションが発送されたときの状態の復元は、あなた次第です。 `configureStore（）`の最初の数行が不完全に見える

function userReducer(state = userInitialState, action) { 
    switch (action.type) { 
     case LOAD_STORED_STATE: 
      return fromJS(action.storedState); 
     case USER_LOGGING_IN: 
      return state 
       .set('isLoading', true); 
     case USER_LOGGED_IN: 
      return state 
       .set('data', action.payload) 
       .set('isLoading', false); 
     case USER_LOGGED_OUT: 
      return userInitialState; 
     default: 
      return state; 
    } 
}