Question

我有一个NextJS React应用，它在_app.tsx上使用next-react-wrapper（基本上是HOC），如下所示：

_app.tsx

...
import withRedux from 'next-redux-wrapper';

class Page extends App<Props> {
  ...
}

export default withRedux(reduxStore)(Page);

store.ts

import { applyMiddleware, createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';

import rootReducer from './reducer';

export default (
  initialState: any = undefined,
) => createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware()),
);

我正在努力研究如何在React外部访问商店，例如在一个简单的辅助函数中。我的store.ts文件导出了一个makeStore函数，该函数是next-redux-wrapper HOC所必需的（包括初始状态）。

我可以访问React组件中的商店，每次将其作为参数传递给我的辅助函数，但这似乎很麻烦。

是否可以从非React助手功能模块直接访问商店？

Answer 1

我通过从设置商店状态的makeStore函数中分配了一个INITIALIZE动作来使其工作。

Store.js

import { createStore } from 'redux'

const initialState = {
  ...
}

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'INITIALIZE':
      return action.value
    ...

    default:
      return state
  }
}

export default createStore(reducer, initialState)

_app.js

import Store from '../Store'
...

class MyApp extends App {
  ...
}

const makeStore = (initialState) => {
  Store.dispatch({ type: 'INITIALIZE', value: initialState })
  return Store
}

export default withRedux(makeStore)(MyApp)

现在您可以在任何地方导入Store.js并调用Store.dispatch或Store.getState。

Answer 2

这可能不是最好的选择，但是可以使用storeKey从窗口访问商店。默认密钥为__NEXT_REDUX_STORE__，其使用如下所示：

window.__NEXT_REDUX_STORE__.getState()

Here's where that happens

可以在传递给withRedux函数参数的第二个选项参数中更改键（storeKey）。对于您的实现，它看起来像这样：

export default (
  initialState: any = undefined,
  { storeKey: 'whateveryouwant' } // the name on the exposed store variable
) => createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware()),
);

Answer 3

您可以创建高阶函数以将任何其他函数包装到store中。这是一个简单的示例，将存储作为this参数传递给任何其他函数。

function withReduxFunction(store) {
    return function (connectedFunction) {
        return function (...args) {
            connectedFunction.call(store, ...args);
        }
    }
}

和用法。例如，我们要为此功能提供存储

function doSomthingWothStore(arg1, arg2) {
    console.log(this);   // This will be store
    console.log("arg1: " + arg1 + " arg2 " + arg2);
}

做

const funcWithStore = withReduxFunction(store)(doSomthingWothStore);

现在您可以调用funcWithStore，this将等于存储。

您可以使用高阶函数使其适合您（例如，将存储作为第一个参数传递，依此类推）。

您还可以查看useDispatch和useSelector hooks from react-redux。它们还应该可以使用任何功能。

Answer 4

您可以在需要的地方导入商店模块，并直接访问store.getState()之类的商店功能。但是，您需要订阅商店，以便在状态发生任何变化时得到通知。

Answer 5

我遇到了同样的问题，但是找到了解决方法。

此lib的自述文件给出了makeStore函数的示例，如下所示：

const makeStore = (initialState, options) => {
    return createStore(reducer, initialState);
};

您需要对其进行一些修改

let store;
const makeStore = (initialState, options) => {
    store = createStore(reducer, initialState);
return store;
};

export {store}

现在，您可以从任何位置导入商店。

Answer 6

您可以先创建商店，然后从makeStore（）返回它

export const store = createStore(...)
const makeStore() {
  return store
}
export const wrapper = createWrapper(makeStore, { debug: true })

使用next-redux-wrapper时在React外部访问Redux存储

6 个答案: