preloadedState - kết quả phiên được ghi đè bởi bộ giảm tốc khác

Question

Tôi có bộ giảm tốc (sử dụng thư viện phiên redux) sử dụng phần mềm trung gian để khôi phục trạng thái từ cửa hàng địa phương. Tôi có thể nhìn thấy từ các công cụ gỡ lỗi mà điều này đang làm việc như dự định, tuy nhiên nó đang được thay thế bằng trạng thái ban đầu của trình giảm tốc người dùng của tôi.

Tôi cảm thấy mình nên sử dụng preloadedState, nhưng tôi không thể lấy kết quả của bộ giảm tốc trong createStore?

được lưu trữState đang được khôi phục chính xác (Tôi có thể đăng nhập vào bảng điều khiển).

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

Tôi không thể xem cách tốt nhất để sao chép 'phiên' trở lại 'người dùng' khi trang được tải lại?

phiên giảm:

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

tài giảm tốc:

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

Như bạn có thể thấy từ redux-session docs, điều duy nhất mà thư viện này cố gắng thực hiện để khôi phục trạng thái đã lưu là gửi đi hành động LOAD_STORED_STATE (có thể được tùy chỉnh). Khôi phục trạng thái của bạn khi hành động được gửi đến tùy thuộc vào bạn. Cách đơn giản nhất để khôi phục lại trạng thái user là để xử lý tác này trong userReducer của bạn, do đó nó sẽ giống như thế:

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