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

JavaScript React.js

西里神奇

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功能模块直接访问商店？

第3213篇《使用next-redux-wrapper时在React外部访问Redux存储》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
Gil 2020.03.24

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

泡芙 2020.03.24

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android