Как контролировать время работы пользовательских хуков на основе useReducer

Question

Я пишу пользовательский хук, который позволяет вставлять любое количество промежуточных продуктов перед встроенным хуком ReactJ 'UseReducer'.Требуемый эффект: dispatch => call middleware1 => ... call middleare i ... => вызов встроенной диспетчеризации.Я создал пользовательскую функцию 'useMiddlewareReducer' для соединения промежуточных программ и ReactJs useReducer.

Процесс подключения в функции useMiddlewareReducer является неизменяемым, поэтому я считаю, что его следует вызывать только один раз.Но на самом деле, каждый раз, когда компонент приложения перезапускается, вызывается функция useMiddlewareReducer.Есть ли способ предотвратить это?Или, если бы я применил неправильный шаблон, какой будет правильный шаблон для вставки промежуточных продуктов перед встроенным редуктором?

// useMiddlewareReducer.js
import { useReducer } from 'react';
export default function(reducer, initState, lazyState, ...middleWares) {
    // ===== expected middleware signature ======
    //  function(state,next){
    //      return function(action){
    //          ...  
    //          next(new action);  
    //      }
    //  }

    // get state and built-in dispatch from ReactJs   
    let [state, dispatch] = useReducer(reducer, initState, lazyState);

    if (!middleWares || !middleWares.length)
        return [state, dispatch];

    // middleWares：the array of middleware
    // connect all middlewares and insert them before ReactJs dispatch
    while (middleWares.length > 0) {
        dispatch = middleWares.pop()(state, dispatch);
    }

    return [state, dispatch];
}

// App.js
import reducer from 'reducer.js';
import useMiddlewareReducer from 'useMiddlewareReducer.js';
import logMiddleware from 'logMiddware.js';
import serviceMiddleware from 'serviceMiddleware.js';
import {DispatchContext} from 'contexts.js';

export default function App(){
    let [state,dispatch]=useMiddlewareReducer(reducer,{},undefined,logMiddleware,serviceMiddleware);
    return (
        <DispatchContext.Provider value={dispatch}>
            ...
        </DispatchContext.Provider>
    );
} 

В приведенных выше кодах изменения состояния приведут к повторной визуализациикомпонент App, а затем будет вызвана функция useMiddlewareReducer, а именно процесс сборки промежуточного программного обеспечения происходит много раз.Это неэффективно.И это приводит к другой проблеме - объект диспетчеризации всегда будет новым, он может привести к непреднамеренному повторному рендерингу всех потребителей DispatchContext.