通过 redux store 增强器添加额外中间件的正确方法是什么？

Question

我正在编写一个存储增强器来通过 redux 存储公开我的库 API。

// consumer of the library

import React from "react";
import ReactDOM from "react-dom";
import { Provider, useStore } from "react-redux";
import { createStore, applyMiddleware, compose } from "redux";
import { myEnhancer } from "myLib";

const reducer = () => ({}); 

const store = createStore(reducer, compose(
  myEnhancer,
));

function SomeComponent() {
  const { myLib } = useStore();

  return (
    <button onClick={() => myLib.doSomething()}>
      click!
    </button>);
}

function App() {
  return (
    <Provider store={store}>
      <SomeComponent />
    </Provider>);
}

ReactDOM.render(<App />, document.getElementById("root"));

这很有效，但我的库还包含我想添加到 redux 存储中的中间件。我知道我也可以公开中间件，并让库的使用者将其添加到其存储中：

import { myEnhancer, myMiddleware } from "myLib";

const reducer = () => ({}); 

const store = createStore(reducer, compose(
  applyMiddleware(myMiddleware),
  myEnhancer,
));

但是因为我已经提供了一个商店增强器，我想知道是否可以直接通过增强器添加中间件？

可悲的是，我不确定这样做的正确方法是什么。这就是我尝试添加中间件的方式：

// part of the library

import { applyMiddleware } from "redux";

const myMiddleware = (store) => (next) => (action) => {
  next(action);
  if (action.type === "demo") {
    console.log("I'm a side effect!");
  }
};

export const myEnhancer = (createStore) => (reducer, preloadedState) => {

  const store = createStore(reducer, preloadedState, applyMiddleware(
    myMiddleware
  ));

  store.myLib = {
    doSomething: () => store.dispatch({ type: "demo" }),
  };

  return store;
};

这有效！...但我一定是做错了，因为当我尝试将我的增强器与其他增强器结合时它停止工作：

// consumer of the library

// ...

// some additional middleware that the user of the library 
// would like to add to the store
const logger = (store) => (next) => (action) => {
  console.group(action.type);
  console.info("dispatching", action);
  const result = next(action);
  console.log("next state", store.getState());
  console.groupEnd();
  return result;
};

const reducer = () => ({}); 

const store = createStore(reducer, compose(
  applyMiddleware(logger), 
  myEnhancer,
  window.__REDUX_DEVTOOLS_EXTENSION__ 
    ? window.__REDUX_DEVTOOLS_EXTENSION__() 
    : (noop) => noop,
));

// ...

如果applyMiddleware在 compose 中放置在我的增强器后面，它就可以工作（尽管它应该始终是第一个）。如果我添加 devtool 增强器，它总是会失败。

如何通过我的增强器应用中间件，使其不与其他增强器（例如applyMiddleware?

Answer 1

createStore好吧，在逐步完成 redux 代码之后，我最终弄清楚了这一点applyMiddleware。我花了一段时间才明白正在发生的事情，但只是通过将中间件链接到其上来applyMiddleware“增强”该功能。store.dispatch

像这样的东西：

store.dispatch = (action) => {
  middleware1(store)(middleware2(store)(store.dispatch))(action);
};

我们可以继续向 store.dispatch 添加中间件，并且可以在增强器中做到这一点。这就是增强器最终的样子：

export const myEnhancer = (createStore) => (...args) => {

  // do not mess with the args, optional enhancers needs to be passed along
  const store = createStore(...args);

  // add my middleware on top of store.dispatch
  // it will be called before all other middleware already added to store.dispatch 
  store.dispatch = myMiddleware(store)(store.dispatch);

  // very important - store.dispatch needs to be enhanced before defining the functions below. 
  // or the version of store.dispatch that they will call will not contain the 
  // middleware we just added.

  store.myLib = {
    doSomething: () => store.dispatch({ type: "demo" }),
  };

  return store;
};

我猜测为什么之前使用开发工具进行组合失败是因为我没有将enhancerprop传递给createStore.

现在增强子传递的顺序compose不再重要了。

const store = createStore(reducer, compose(
  applyMiddleware(logger), // adds the logger to store.dispatch
  myEnhancer, // adds the api to store, extends store.dispatch with custom middleware
  window.__REDUX_DEVTOOLS_EXTENSION__ 
    ? window.__REDUX_DEVTOOLS_EXTENSION__() 
    : (noop) => noop,
));