如何在反应之外访问 redux 中的当前存储状态？答案

【问题标题】：How to access current store state in redux outside of react?如何在反应之外访问 redux 中的当前存储状态？
【发布时间】：2018-04-13 03:56:31
【问题描述】：

我的 redux 商店有以下代码，当与 react 连接时，一切正常。现在我正在尝试在动作调度程序（反应之外）中访问商店的当前状态，但是当我在初始调度后使用它时得到空值..

import configureStore from '../../common/store/configureStore';
const history = createHistory();
const reduxRouterMiddleware = syncHistory(history);
// Create a new Redux store instance
const store = configureStore({},reduxRouterMiddleware);
console.log("Store data ===>"+JSON.stringify(store.getState()));

我的商店：

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
import DevTools from '../containers/DevTools';
import createLogger from 'redux-logger';
import promise from 'redux-promise';


export default function configureStore(initialState, reduxRouterMiddleware) {
    const logger = createLogger();
    const createStoreWithMiddleware = applyMiddleware(
        thunk,promise,
        reduxRouterMiddleware
    )(createStore);

    const isProduction = process.env.NODE_ENV === 'production';
    let store;
    if (!isProduction) {
        store = createStoreWithMiddleware(rootReducer, initialState, compose(
            DevTools.instrument()
        ));
    }
    else if(initialState!=''){
        store = createStoreWithMiddleware(rootReducer, initialState, compose(
        ));
    }else{
        store = createStore(rootReducer)
    }
    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers');
            store.replaceReducer(nextRootReducer)
        })
    }
    return store
}

更新 1：

我对我的 store 变量进行了一些修改，使 store 成为全局变量，并添加了一个函数来返回 store，这似乎有效。这是正确的方法吗？

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';
import DevTools from '../containers/DevTools';
import createLogger from 'redux-logger';
import promise from 'redux-promise';

let store;
export default function configureStore(initialState, reduxRouterMiddleware) {
    const logger = createLogger();
    const createStoreWithMiddleware = applyMiddleware(
        thunk,promise,
        reduxRouterMiddleware
    )(createStore);
    const isProduction = process.env.NODE_ENV === 'production';

    if (!isProduction && initialState!='') {
        store = createStoreWithMiddleware(rootReducer, initialState, compose(
            DevTools.instrument()
        ));
    }
    else if(initialState!=''){
        store = createStoreWithMiddleware(rootReducer, initialState, compose(
        ));
    }
    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../reducers', () => {
            const nextRootReducer = require('../reducers');
            store.replaceReducer(nextRootReducer)
        })
    }
    return store
}

export function returnStore() {
    return store
}

我可以访问以下商店。

import {returnStore} from '../../common/store/configureStore';
console.log("Store data rules ===>"+JSON.stringify(returnStore().getState().rules.data));

【问题讨论】：

标签： reactjs redux store flux

【解决方案1】：

由于您使用的是redux-thunk，因此您可以像这样从任何动作创建者获取商店的当前状态：

function someAction() {
  return (dispatch, getState) => {
    console.log(store.getState())
  }
}

我的建议是你使用它而不是在全球范围内公开商店。

【讨论】：

谢谢你！我忘了redux-thunk 包含 getState 函数作为参数。超级有帮助，为我节省了大量时间。这应该是公认的答案，因为 OP 正在使用 redux-thunk

【解决方案2】：

这将是一个评论，但由于我没有足够的声誉，所以让我做一些回答。

首先，我和你一样是一个学习者，而不是 JS、React 或 Redux 方面的专家。只是出于好奇，您究竟需要在哪里存储？以下是我获得商店的一些地方和方式：

对于 React 生态系统，显然我使用的是 Provider。
对于 Redux 动作创建者，我使用的是 redux-thunk。
对于 React Router + Redux 组合，我使用的是 react-router-redux。

当然，您可以像您写的那样获得商店。实际上，我不太确定，但我认为 redux-thunk 我们使用了类似的概念。在 action creator 函数（不是 action creator 本身）中，我们从 store 接收 dispatch 和 getState。因此，它以某种方式像您一样从商店返回这些方法。

【讨论】：