Redux에 여러 미들웨어를 추가하는 방법

Redux에 여러 미들웨어를 추가하는 방법

미들웨어는 이미 연결되어 있고, 레덕스-펑크도 하나 더 추가하려고 합니다.

내 앱이 두 미들웨어를 모두 사용하도록 구성하려면 어떻게 해야 합니까?나는 여러 가지 방법으로 통과를 시도했다[ReduxThunk, logger]하지만 소용없었어요

코드:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxThunk from 'redux-thunk';
import logger from 'redux-logger';

import App from './components/app';
import reducers from './reducers';
require('./style.scss');

const createStoreWithMiddleware = applyMiddleware(ReduxThunk)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>,
  document.querySelector('#app')
);

apply Middleware는 미들웨어의 각 부분을 (배열이 아닌) 새로운 인수로 받아들입니다.원하는 미들웨어를 하나씩 건네주세요.

const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);

Andy's의 답변도 좋지만, 미들웨어가 증가하고 있는 것을 고려하면 아래 코드가 더 나을 것입니다.

const middlewares = [ReduxThunk, logger]
applyMiddleware(...middlewares)

applyMiddleware는 두 번째 파라미터로 createStore에 전달됩니다. applyMiddleware여러 미들웨어를 인수로 사용할 수 있습니다.

const store = createStore(reducers, applyMiddleware(ReduxThunk, logger));

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.querySelector('#app')
);

1개 또는 여러 개의 미들웨어를 적용하는 방법은 다음과 같습니다.

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import {rootReducer} from "../reducers"; // Import your combined reducers ;)

const middleWares = [thunk, logger]; // Put the list of third part plugins in an array 

// Create the store with the applied middleWares and export it
export const store = createStore(rootReducer, applyMiddleware(...middleWares));

이제 index.js에서 최근에 내보낸 저장소를 가져와 공급자 구성 요소에 전달합니다.index.js 파일은 다음과 같습니다.

... ...

import {Provider} from 'react-redux';
import {store} from './store';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
document.getElementById('root'));

그게 다야!

답변이 조금 늦어질 수 있지만, 제 문제는 미들웨어에 devtools를 추가하는 것이었습니다.이것이 누군가에게 도움이 되기를 바랍니다.

 // imports.. 
 import { composeWithDevTools } from "redux-devtools-extension";

  const store = createStore(
     Reducer,
     persistedState,
    composeWithDevTools(applyMiddleware(ReduxThunk, promiseMiddleware))
 );

다음 코드와 같이 쉼표로 구분하여 미들웨어를 전달하기만 하면 됩니다.

const store = createStore(reducer, applyMiddleware(thunk, logger));

주의: 상단에 있는 applyMiddlware, thunk 및 logger를 Import하십시오.

export default configureStore({
  reducer: {
    products: productReducer,
    cart: cartReducer,
    [productsApi.reducerPath]: productsApi.reducer,
    userAuth: authSlice,
  },

  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false
    }).concat(productsApi.middleware),

});

언급URL : https://stackoverflow.com/questions/43955199/how-to-add-multiple-middleware-to-redux