web-dev-qa-db-ja.com

TypeError：ミドルウェアは機能ではありません

Reactjsアプリでreduxを適用しようとしています。これらのエラーのため続行できません：

enter image description here

enter image description here

必要なすべての依存関係が既にインストールされていると確信しています。ここに私のpackage.jsonの関連部分があります

"dependencies": {
   "react-redux": "^5.0.6",
   "redux": "^3.7.2",
   "redux-logger": "^3.0.6",
   "redux-promise": "^0.5.3",
   "redux-thunk": "^2.2.0",
}

Reduxを実装するindex.jsの一部を次に示します

import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import reducers from './reducers';

const logger = createLogger();
const store = createStore(reducers,
    applyMiddleware(
        thunkMiddleware, logger
    )
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);
reactjsreduxreact-reduxredux-thunk
19
James Solomon Belda

docs によると、redux-logger

特定のcreateLogger関数をインポートする必要があります

import { createLogger } from 'redux-logger'

const logger = createLogger({
  // ...options
});

または、デフォルトのインポートを使用します

import logger from 'redux-logger'

そして、あなたのコードはうまくいくはずです

const store = createStore(
  reducers,
  applyMiddleware(thunkMiddleware, logger)
)
27
Balázs Édes

問題を修正する最も簡単な方法

import * as thunk from 'redux-thunk';



createStore(rootReducer, InitialState, applyMiddleware(thunk.default));
1
Erastus ruiru

私はあなたの依存関係にreactとreact-domを見ていません、そしてそれはimport文に含まれていません。

驚くべきredux開発者ツールを使用して、最近アプリを作成した方法の例を紹介します。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import authReducer from '../reducers/auth';
import urlsReducer from '../reducers/urls';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

//Store creation
  const store = createStore(
    combineReducers({
      auth: authReducer,
      urls: urlsReducer
    }),
    composeEnhancers(applyMiddleware(reduxThunk))
  );

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

ReduxThunkの後に、ロガーを追加するだけでよいと思います。また、既にリデューサーを結合している場合は、combinedReducersの代わりにリデューサーを提供するだけです。

よろしく、ラファエル

1
Rafael Sorto

私はミドルウェアのリストにloggerを開発時にのみ追加しようとしましたが、インポートを台無しにして同じエラーを受け取りました。私の問題を修正するには、require()に_.default_を追加する必要がありました。

_const middleware = []

if (process.env.NODE_ENV === 'development') {
  middleware.Push(require('redux-logger').default)
}
_
0
SeanMcP

同じエラーが発生しましたTypeError：ミドルウェアは機能ではありません。

_import { createStore, combineReducers, applyMiddleware } from "redux";
import { createLogger } from "redux-logger";
import thunk from "redux-thunk";

import math from "./reducers/mathReducer";
import user from "./reducers/userReducer";

const logger = createLogger();

export default createStore(
  combineReducers({ math, user }),
  {},
  applyMiddleware(logger, thunk)
);_

applyMiddleware(logger, thunk)をapplyMiddleware(logger, thunk.default)に置き換えるとうまくいきました。

0
Hassan-Hameed