16

我有一个 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);

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

我可以在 React 组件中访问存储，每次都将它作为参数传递给我的辅助函数，但这看起来很混乱。

有没有办法直接从非 React 辅助功能模块访问商店？

4

5 回答 5

4

这可能不是可取的，但可以使用storeKey. 默认键是__NEXT_REDUX_STORE__，使用它看起来像这样：

window.__NEXT_REDUX_STORE__.getState()

这就是发生的地方

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

export default (
  initialState: any = undefined,
  { storeKey: 'whateveryouwant' } // the name on the exposed store variable
) => createStore(
  rootReducer,
  initialState,
  composeWithDevTools(applyMiddleware()),
);
于 2019-09-04T17:35:40.327 回答
1

我有同样的问题，但找到了解决方案。

这个库的自述文件给出了这样的makeStore函数示例：

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

你需要稍微修改一下

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

export {store}

现在，您可以从任何地方导入商店。

于 2020-04-11T14:49:49.320 回答
-1

您可以创建高阶函数来用 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将等于存储。

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

你也可以看看react-reduxuseDispatch的钩子。它们也应该适用于任何功能。useSelector

于 2019-06-28T12:07:51.353 回答
-3

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

于 2019-06-28T12:17:58.140 回答
-3

您可以先创建商店，然后从 makeStore() 返回

export const store = createStore(...)
const makeStore() {
  return store
}
export const wrapper = createWrapper(makeStore, { debug: true })
于 2020-07-23T20:11:54.017 回答