reactjs - react - ¿Cómo agregar múltiples middleware a Redux?

redux think

Question

Tengo una pieza de middleware ya conectada, redux-thunk, y me gustaría agregar otra, redux-logger.

¿Cómo lo configuro para que mi aplicación use ambas piezas de middleware? Intenté pasar una matriz de [ReduxThunk, logger] pero eso no funcionó.

Código:

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

Answer 1

La respuesta de andy es buena, pero, considera que tus middleware están creciendo, los códigos a continuación serán mejores:

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

Answer 2

applyMiddleware toma cada pieza de middleware como un nuevo argumento (no una matriz). Así que solo pase cada pedazo de middleware que desee.

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

Answer 3

applyMiddleware debe pasar a createStore como el segundo parámetro. applyMiddleware puede tener varios middlewares como argumentos.

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

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