javascript - 通过 redux store enhancer 添加额外中间件的正确方法是什么？

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 和 applyMiddleware 的 redux 代码之后，我最终弄明白了这一点。我花了一些时间来了解正在发生的事情，但是 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;
};

关于之前使用 devtools 组合失败的原因，我的猜测是我没有将 enhancer 属性传递给 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,
));