javascript - Redux 订阅并撰写

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 是指您的网络应用程序某些默认状态的初始空状态。如果您想用数据填充您的存储，那么您应该使用操作和化简器来存储所有数据，因为它们的存在只是为了这个目的。