Redux 返回“中间件不是函数”答案

【问题标题】：Redux returns "middleware is not a function"Redux 返回“中间件不是函数”
【发布时间】：2018-11-06 12:24:16
【问题描述】：

我收到 TypeError: middleware is not a function。有一些类似的问题的答案似乎不适用于我的情况。我打算提出一个 axios/async 请求。这是我的 index.js 文件的实现：

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 logger 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 = {
      ...state,
      grid:!state.grid
    }
  }
  if (action.type === 'ADDITIONALPAGES'){
    return state = {
      ...state,
      additionalPages:!state.additionalPages
    }
  }
  return state;
};

const searchItunesReducer = (state = { searchTerm:'', itunes:null }, action) => {
  if (action.type === 'SEARCHTERM'){
    return state = {
      ...state,
      searchTerm:action.payload
      }
    }
  if (action.type === 'FETCHITUNESALBUMS'){
    return state = {
      ...state,

      }
    }
      return state;
  }

const middleware = applyMiddleware(thunk, logger());
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'));

如果我从const store 中删除const middleware = applyMiddleware(thunk, logger()); 和const middleware 行，则应用程序加载不会出现问题。我在这里做错了什么？

【问题讨论】：

您正在调用logger 并将其结果用作中间件；不应该只是applyMiddleware(thunk, logger)吗？
你是对的......谢谢

标签： reactjs redux react-redux redux-thunk

【解决方案1】：

在 React/Redux 教程中的这段代码遇到了同样的问题：

不适合我：

    import { applyMiddleware, createStore } from "redux";
    import thunk from "redux-thunk";
    import promise from "redux-promise-middleware";
    import { composeWithDevTools } from 'redux-devtools-extension';
    import rootReducer from "./reducers";
    const middleware = composeWithDevTools(applyMiddleware(promise(), thunk));
    export default createStore(rootReducer, middleware);

我的解决方案：因为 createStore() 函数需要一个函数，所以我创建了一个。出于某种原因不接受箭头功能（或者我没有正确执行）。我还修改了 promise() 函数调用，只声明了一个参数。这让我完成了编译。

import { applyMiddleware, createStore } from "redux";
import thunk from "redux-thunk";
import  promise from "redux-promise-middleware";
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from "./reducers";

function middleware() {
    return composeWithDevTools(applyMiddleware(promise, thunk));
}

export default createStore(rootReducer, middleware());

【讨论】：