Доступ к хранилищу Redux за пределами React при использовании next-redux-wrapper

Question

У меня есть приложение NextJS React, которое использует обертку next-реагировать (в основном 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 экспортирует функцию makeStore, которая необходима (включая начальное состояние) для HOC next-redux-wrapper.

Я мог бы получить доступ к хранилищу в компоненте React и каждый раз передавать его своим вспомогательным функциям в качестве аргумента, но это выглядит грязно.

Есть ли способ получить доступ к хранилищу напрямую из вспомогательных функциональных модулей React?

Answer 1

Я заставил это работать, отправив действие INITIALIZE из моей функции makeStore, которая устанавливает состояние магазина.

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

Вы можете импортировать модуль хранилища там, где это необходимо, и иметь прямой доступ к функциям хранилища, таким как store.getState(). Однако вы должны подписаться на магазин, чтобы получать уведомления о любых изменениях в состоянии.

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);
}

Do

const funcWithStore = withReduxFunction(store)(doSomthingWothStore);

Теперь вы можете вызывать funcWithStore и this будет равно store.

Вы можете поиграть с функцией старшего разряда, чтобы сделать ее подходящей для вас (т.е. передать хранилище в качестве первого аргумента и т. Д.).

Также вы можете взглянуть на useDispatch и useSelector крючки от реаги-редукса .Они также должны работать с любой функцией.