Redux에 여러 미들웨어를 추가하는 방법은 무엇입니까?

Redux에 여러 미들웨어를 추가하는 방법은 무엇입니까?

---

미들웨어가 이미 연결되어있는 redux-thunk가 있고 또 다른 redux-logger를 추가하고 싶습니다.

내 앱이 두 가지 미들웨어를 모두 사용하도록 구성하려면 어떻게해야합니까? 나는 배열을 전달하려고 시도했지만 [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')
);

---

applyMiddleware 는 각 미들웨어를 배열이 아닌 새 인수로 사용합니다. 따라서 원하는 미들웨어의 각 부분을 전달하십시오.

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

---

앤디의 대답은 좋지만 미들웨어가 성장하고 있다고 생각하면 아래 코드가 더 좋을 것입니다.

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')
);

---

다음은 하나 이상의 미들웨어를 적용하는 방법입니다.

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에서 최근에 내 보낸 저장소를 가져 와서 Provider 구성 요소에 전달합니다. index.js 파일은 다음과 같아야합니다.

... ...

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

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

그게 다야 !

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