如何在 redux 中间件中使用 enhance store？

Question

我正在构建一个 React-Redux 应用程序，需要一个可以访问增强存储的中间件 function 。 我无法让增强型商店在中间件 function 中可用。这可能吗？如果可以的话，怎么做？

https://codesandbox.io/s/redux-enhanced-store-in-middleware-e1c5uv?file=/src/main.ts

import {createElement} from 'react'
import {Provider, useDispatch} from 'react-redux'
import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit'
import { createRoot } from 'react-dom/client'

function reducer(state, action){
  console.debug("reducer...")
  return state
}

const apiMiddleware = (store) => (next) => (action) => {
  console.debug("apiMiddleware", store) // I would like store.api here
  return next(action)
}

const storeEnhancer = (next) => {
    const api = {doSomething: () => console.debug("api.doSomething")}
    
    return (reducer, initialState) => {
      const the_store = {api, ...next(reducer, initialState)}
      console.debug("storeEnhancer", the_store)
      return the_store
    }
  }

const store: any = configureStore({
  reducer,
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(apiMiddleware),
  enhancers: (defaultEnhancers) => [...defaultEnhancers, storeEnhancer],
})

const ClickButton = () => {
  const dispatch = useDispatch()
  const onClick = () => dispatch({type: "action"})
  return createElement("button", {onClick}, "clicky")
}

export const app = () => 
{
  const rootElement = document.getElementById("root") 
  const root = createRoot(rootElement!) 
  root.render(createElement(Provider, {store, children: createElement(ClickButton)}))
  return createElement("div", {}, "hello")
}

Answer 1

中间件不会将整个Redux 存储作为它们最外层的参数。 相反，他们得到的是部分版本——只是{dispatch, getState} 。

这就是为什么我更喜欢将该变量称为storeApi而不是store ，因为它不是整个商店：

• https://redux.js.org/tutorials/fundamentals/part-4-store#writing-custom-middleware

所以是的，如果您的增强器将额外的字段附加到store实例，您将无法访问中间件中的那些字段。