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

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

回答(2)
时间
G
Gil
2 · 2020-03-24 10:08:30

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

泡芙
1 · 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等于商店。

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

您也可以查看一下useDispatchuseSelector 从react-redux上钩它们还应具有任何功能。

你的回答

加载中...
⌘+Return 发表
发表

温馨提示:登录后可发表评论或回复

关闭,朕知道了

扫码关注微信公众号或小程序