Redux Subscribe with compose

Question

我有一个相当具体的实现问题。我正在做一个项目，他们已经配置了他们的Redux Store，并为项目需要的东西添加了一个中间件。我试图将我的数据持久化到本地存储，但通常我会遍历，当我创建一个存储时，我会添加订阅，然后添加以下代码。

const saveToLocalStorage = state => {
  try {
    const serializedState = JSON.stringify(state);
    localStorage.setItem('state', serializedState);
  } catch (error) {
    console.log(error);
  }
};

const loadFromLocalStorage = () => {
  try {
    const serializedState = localStorage.getItem('state');
    if (serializedState === null) return undefined;
    return JSON.parse(serializedState);
  } catch (error) {
    console.log(error);
    return undefined;
  }
};

const persistedState = loadFromLocalStorage();

const store = createStore(
  rootReducer,
  persistedState,
  window.devToolsExtension ? window.devToolsExtension() : f => f
)

store.subscribe(() => saveToLocalStorage(store.getState()));

我正在尝试实现与下面类似的东西，但也会添加它，并尽可能少地更改以下代码，这些代码来自配置项目时的样板。

const createStoreWithMiddleware = compose(
  applyMiddleware(thunk),
  window.devToolsExtension ? window.devToolsExtension() : f => f
)(createStore);

export default function configureStore(initialState) {
  return createStoreWithMiddleware(rootReducer, initialState);
}

我对组合和添加额外的中间件不是很熟悉，所以任何帮助都会非常感谢。

Answer 1

如果你想用中间件创建一个商店，你可以这样做

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const configureStore = () => {
    const store = createStore(
        combineReducers({
            library: libraryReducer,
            filters: filterReducer,
            auth: authReducer
        }),
        composeEnhancer(applyMiddleware(thunk))
    );
    return store;
}

export default configureStore;

Store表示web应用程序的某个默认状态的初始空状态。如果你想用数据填充你的存储，那么你应该使用actions和reducer来存储你所有的数据，因为它们的存在只是为了这个目的。