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

西里神奇2020-03-24

我有一个NextJS React应用程序，它使用next-react-wrapper（基本上是HOC）_app.tsx像这样：

_app.tsx

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

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

export default withRedux(reduxStore)(Page);

商店

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文件导出了makeStorenext-redux-wrapper HOC所需的功能（包括初始状态）。

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

有没有一种方法可以从非React helper功能模块直接访问商店？

Gil2020/03/24 10:08:30

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

泡芙2020/03/24 10:08:30

您可以创建高阶函数以将任何其他函数包装在store中。这是将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 从react-redux上钩。它们还应具有任何功能。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer