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应用程序的某些默认状态的初始空状态。如果要用数据填充商店，则应使用操作和reducer存储所有数据，因为它们仅出于此目的而存在。

Redux订阅撰写

1 个答案: