Redux：レデューサーが受け取った前の状態に予期せぬタイプの「機能」があります

Question

クロムエクステンションのミドルウェアを追加すると、レデューサーはサイトで正常に機能しなくなります（ただしchrome/reduxデバッグツールは機能します）

レデューサーが受け取った以前の状態には、予期しないタイプの「機能」があります。次のキーを持つオブジェクトであることが予想引数： "AUTH"、 "普通"、 "ホーム"

ここ

コードです：私はクロームの一部を削除した場合

import { applyMiddleware, createStore } from 'redux'; 
import { promiseMiddleware, localStorageMiddleware } from './middleware'; 
import reducer from './reducer'; 

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware); 

const store = createStore(reducer, middleware, 
     window.devToolsExtension ? window.devToolsExtension() : f => f); 

export default store; 

：

,window.devToolsExtension ? window.devToolsExtension() : f => f 

Ifは正常に機能します。

Answer 1

createStoreは3つの引数をとります。 2番目の引数が関数である場合、2番目の引数はストアエンハンサーとみなされます。オブジェクトまたはの場合、3つの引数があります。引数は、の初期状態とみなされます。 hereを参照してください。

window.devToolsExtension ? window.devToolsExtension() : f => f 

あなたは、単一の機能の両方で構成する必要があります：このため

import { applyMiddleware, createStore, compose } from 'redux'; 
import { promiseMiddleware, localStorageMiddleware } from './middleware'; 
import reducer from './reducer'; 

const middleware = applyMiddleware(promiseMiddleware, localStorageMiddleware); 

const store = createStore(
    reducer, 
    compose(middleware, window.devToolsExtension ? window.devToolsExtension() : f => f) 
); 

export default store; 

ドキュメントを見つけることができる

あなたのミドルウェア変数は、ストアエンハンサーおよびChromeの拡張機能も増強されていますhere。

Answer 2

createStoreaccepts the following arguments：

• 減速
• プリロードされた状態
• エンハンサー

唯一の2つの引数が供給され、第2引数は関数であり、エンハンサーであると考えられていた場合。 source codeを参照してください。

Redux devtoolsを使用する場合は、追加エンハンサーとしてcomposeを追加する必要があります。

import { applyMiddleware, createStore, compose } from 'redux'; 

    const store = createStore(
     reducer, 
     compose(
     middleware, 
     window.devToolsExtension ? window.devToolsExtension() : f => f 
    ) 
    ) 

Pozdrav