reactjs - 如何在 Metronic 中使用 thunk 而不是 Redux Saga

Question

我正在使用 Metronic 主题来构建一个 React 应用程序。v7

默认情况下，metronic 使用 redux Saga。我对佐贺不熟悉。我知道。所以我试图修改代码，但我被卡在启动画面上。

这是使用 Saga 的默认代码：

store.js

import {configureStore, getDefaultMiddleware} from "@reduxjs/toolkit";
import createSagaMiddleware from "redux-saga";
import {reduxBatch} from "@manaflair/redux-batch";
import {persistStore} from "redux-persist";
import {rootReducer, rootSaga} from "./rootReducer";

const sagaMiddleware = createSagaMiddleware();
const middleware = [
  ...getDefaultMiddleware({
    immutableCheck: false,
    serializableCheck: false,
    thunk: true
  }),
  sagaMiddleware
];

const store = configureStore({
  reducer: rootReducer,
  middleware,
  devTools: process.env.NODE_ENV !== "production",
  enhancers: [reduxBatch]
});

export const persistor = persistStore(store);

sagaMiddleware.run(rootSaga);

export default store;

index.js（保持不变，除了商店导入位置）

ReactDOM.render(
    <MetronicI18nProvider>
        <MetronicLayoutProvider>
            <MetronicSubheaderProvider>
                <MetronicSplashScreenProvider>
                    <App store = {store} persistor = {persistor} basename = {PUBLIC_URL}/>
                </MetronicSplashScreenProvider>
            </MetronicSubheaderProvider>
        </MetronicLayoutProvider>
    </MetronicI18nProvider>,
    document.getElementById("root")
);

RootReducer.js：

import {all} from "redux-saga/effects";
import {combineReducers} from "redux";

import * as auth from "../app/modules/Auth/_redux/authRedux";
import {customersSlice} from "../app/modules/ECommerce/_redux/customers/customersSlice";
import {productsSlice} from "../app/modules/ECommerce/_redux/products/productsSlice";
import {remarksSlice} from "../app/modules/ECommerce/_redux/remarks/remarksSlice";
import {specificationsSlice} from "../app/modules/ECommerce/_redux/specifications/specificationsSlice";

export const rootReducer = combineReducers({
  auth: auth.reducer,
  customers: customersSlice.reducer,
  products: productsSlice.reducer,
  remarks: remarksSlice.reducer,
  specifications: specificationsSlice.reducer
  // TODO add Reducers here

});

export function* rootSaga() {
  yield all([auth.saga()]);
}

我将其更改为：store.js

import {persistStore} from "redux-persist";
import {applyMiddleware, combineReducers, compose, createStore} from "redux";
import thunk from "redux-thunk";

import technologyReducer from "./reducers/technologyRed";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const rootReducer = combineReducers({
    technology: technologyReducer
});

const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));

export const persistor = persistStore(store);

export default store;

你能帮我在 Metronic 中使用 thunk 而不是 saga 吗？

标签： reactjsreact-reduxredux-sagaredux-thunkmetronic