Is this the correct way to implement middleware in redux?

Question

I am attempting to debug a redux store for async actions. But I am failing to pass dispatch as a function so I will be posting series of questions to help myself find my issue. The first thing I need to ensure is that I am applying redux-thunk properly. So is this the correct way to implement redux middleware?

 import { createStore,applyMiddleware,combineReducers,compose } from 'redux'; import thunk from 'redux-thunk'; import {createLogger} from 'redux-logger'; import {inventoryFilter,availableAttributes} from '../reducers/reducer'; const logger=createLogger() const Store = createStore( ///combine imported reducers combineReducers({ activeFilter:inventoryFilter, availableAttributes:availableAttributes },{},applyMiddleware(thunk,logger) )); export default Store; 

Answer 1

No. You're passing the middleware enhancer as an argument to combineReducers , when it should actually be an argument to createStore .

Here's how I would write it:

import { createStore,applyMiddleware,combineReducers,compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import {createLogger} from 'redux-logger';
import {inventoryFilter,availableAttributes} from '../reducers/reducer';


const rootReducer = combineReducers({
    activeFilter:inventoryFilter,
    availableAttributes:availableAttributes
});

const loggerMiddleware = createLogger();
const middlewareEnhancer = applyMiddleware(thunkMiddleware, loggerMiddleware);

const store = createStore(rootReducer, middlewareEnhancer);

export default store;