Redux报错'middleware is not a function'，求问题排查与解决

嘿，我一眼就看到你代码里的问题啦——问题出在redux-logger的使用方式上！

为啥会报错？ #

你现在写的是applyMiddleware(thunk, logger())，这里直接调用logger()是错误的：

• 如果你用的是新版redux-logger，它默认导出的是createLogger工厂函数，得调用createLogger()才能生成符合要求的中间件；
• 就算是旧版redux-logger，直接调用logger()返回的结果也不是Redux认可的中间件函数，这就导致applyMiddleware生成的最终值不是合法的中间件增强器，所以createStore才会抛出middleware is not a function的错误。

怎么修复？ #

分两种情况来调整：

情况1：使用新版redux-logger（推荐） #

先修正导入语句，把createLogger导进来，再用它生成中间件：

// 替换原来的logger导入
import { createLogger } from 'redux-logger';

// 然后生成中间件的时候这样写
const middleware = applyMiddleware(thunk, createLogger());

情况2：使用旧版redux-logger #

如果你的redux-logger是旧版本，默认导出就是logger函数，那你直接传logger本身就行，不要调用它：

import logger from 'redux-logger';

const middleware = applyMiddleware(thunk, logger);

修正后的完整代码片段 #

我还顺便帮你补了searchItunesReducer里FETCHITUNESALBUMS的逻辑（你之前这里是空的，会导致数据无法更新到store）：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import './index.css'; 
import App from './App'; 
import registerServiceWorker from './registerServiceWorker'; 
import { Provider } from 'react-redux'; 
import { createStore, combineReducers, applyMiddleware } from 'redux'; 
import axios from 'axios'; 
import thunk from 'redux-thunk'; 
import { createLogger } from 'redux-logger'; 

const PATH_BASE = 'https://itunes.apple.com/search'; 
const PATH_TERM = 'term='; 
const COUNTRY = 'country=es'; 
const ALBUMS = 'entity=album'; 
const LIMIT = 'limit=60'; 

const booleanReducer = (state = { grid:true, additionalPages:false }, action) => { 
  if (action.type === 'GRID'){ 
    return { ...state, grid:!state.grid } 
  } 
  if (action.type === 'ADDITIONALPAGES'){ 
    return { ...state, additionalPages:!state.additionalPages } 
  } 
  return state; 
}; 

const searchItunesReducer = (state = { searchTerm:'', itunes:null }, action) => { 
  if (action.type === 'SEARCHTERM'){ 
    return { ...state, searchTerm:action.payload } 
  } 
  if (action.type === 'FETCHITUNESALBUMS'){ 
    // 补充payload赋值，否则获取数据后store不会更新
    return { ...state, itunes: action.payload } 
  } 
  return state; 
} 

const middleware = applyMiddleware(thunk, createLogger()); 
const store = createStore(combineReducers({booleanReducer,searchItunesReducer}),middleware); 

console.log(store.getState()); 
store.subscribe(() =>{ 
  console.log("store updated!", store.getState()); 
}); 

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

小提醒 #

以后用Redux中间件的时候要注意：中间件要么是直接传入函数本身，要么是通过工厂函数（比如createLogger）生成的实例，别随便瞎调用哦～

内容的提问来源于stack exchange，提问作者KT-mongo