пустой магазин при доступе за пределы компонента

Question

Я пытаюсь получить доступ к хранилищу вне компонента с помощью store.getState().

Я могу получить доступ к хранилищу, но хранилище с helpers.js всегда пусто (начальные значения).

Есть идеи, почему это происходит, и что я должен изменить, чтобы получить доступ к магазину извне компонента?

помощников. js

import configureStore from '../store/configureStore';

export const test = () => {
  const { store } = configureStore();
  console.log('store:', store.getState()); //the store here always contains initial values
};

configureStore. js

/* eslint-env browser */
import { createStore, applyMiddleware, compose } from 'redux';
import { createHashHistory } from 'history';
import { routerMiddleware, routerActions } from 'connected-react-router';
import { createLogger } from 'redux-logger';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import { createBlacklistFilter } from 'redux-persist-transform-filter';

import createRootReducer from '../ducks';
import apiMiddleware from '../middleware/api';
import downloadMiddleware from '../middleware/download';

const history = createHashHistory();

const rootReducer = createRootReducer(history);

const persistConfig = {
  key: 'root',
  storage,
  transforms: [
    createBlacklistFilter('auth', ['error']),
    createBlacklistFilter('window', ['warningDialogOpen']),
    createBlacklistFilter('file', ['downloading']),
  ],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const configureStore = initialState => {
  // Redux Configuration
  const middleware = [];
  const enhancers = [];

  // API Middleware
  middleware.push(apiMiddleware);
  // Download Middleware
  middleware.push(downloadMiddleware);

  // Logging Middleware
  const logger = createLogger({
    level: 'info',
    collapsed: true,
  });

  // Skip redux logs in console during the tests or production
  if (process.env.NODE_ENV === 'development') {
    middleware.push(logger);
  }

  // Router Middleware
  const router = routerMiddleware(history);
  middleware.push(router);

  // Redux DevTools Configuration
  const actionCreators = {
    ...routerActions,
  };
  // If Redux DevTools Extension is installed use it, otherwise use Redux compose
  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
    ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
        // Options: http://extension.remotedev.io/docs/API/Arguments.html
        actionCreators,
      })
    : compose;

  // Apply Middleware & Compose Enhancers
  enhancers.push(applyMiddleware(...middleware));
  const enhancer = composeEnhancers(...enhancers);

  // Create Store
  const store = createStore(persistedReducer, initialState, enhancer);
  if (module.hot) {
    // eslint-disable-next-line global-require
    const nextRootReducer = require('../ducks').default;
    module.hot.accept('../ducks', () =>
      store.replaceReducer(persistReducer(persistConfig, nextRootReducer))
    );
  }

  const persistor = persistStore(store);

  return { store, history, persistor };
};

export default configureStore;

Answer 1

Я переместил вызов функции configureStore () за пределы тестовой функции. Поскольку configureStore воссоздает хранилище каждый раз, когда вы получаете начальное состояние каждый раз, когда вызываете test

import configureStore from '../store/configureStore';
const { store } = configureStore();

export const test = () => {
  console.log('store:', store.getState()); //the store here always contains initial values
};