使用配置存储函数将中间件传递到redux存储

3phpmpom  于 2023-03-18  发布在  其他
关注(0)|答案(1)|浏览(141)

我正在尝试制作一个简单的gitHub配置文件审查react应用程序,我正在学习中间件,但我似乎有一点问题,当我把中间件传递给configureStore时,它似乎没有正确接收它
这是我的index.js中的代码:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { configureStore, applyMiddleware } from '@reduxjs/toolkit';
import theReducer from './Store/reducer';
import { Provider } from 'react-redux';

const logger = store => next => action =>{
  console.log('[middleWare] Dispatching' , action);
  const result = next(action);
  console.log('[middleWare] next state' , store.getState());
  return result;
}
const middleWare = applyMiddleware(logger);

const store = configureStore({ reducer: theReducer}, middleWare);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>
);

reportWebVitals();

当我向Reducer发送一个操作时,我希望我的操作和存储会出现在控制台中,然后我怀疑我可能没有正确地调度我的操作,我将这个中间件应用到另一个react应用程序中,在那里我学习了redux(每个人都教react-redux的计数器应用程序)在那里我知道调度动作是有效的,结果是一样的。唯一不同的是,他们将中间件传递给createStore函数,如下所示:const store = createStore(reducer, middleware);但是我不能再用这个了,因为新的configureStore函数现在很流行。我怎么能用configureStore函数把我的中间件传递到商店呢?这可能吗?

uurv41yg

uurv41yg1#

好吧,我真的应该更深入地研究redux文档:),下面是我一直在寻找的答案:
https://redux-toolkit.js.org/api/getDefaultMiddleware
getDefaultMiddleware在您想要添加一些定制中间件,但仍然想要添加默认中间件时非常有用:

const store = configureStore({reducer: theReducer,
 middleware(getDefaultMiddleware)=>getDefaultMiddleware().concat(logger)});

相关问题