redux-devtools를 미들웨어가 포함 된 redux 스토어에 전달

Question

this code은 redux-devtools 설명서의 내용과 관련하여 어떻게 처리됩니까?

https://github.com/auth0-blog/redux-auth/blob/master/index.js#L10-L12

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore) 

let store = createStoreWithMiddleware(quotesApp) 

나는 DevTools로를 포함하려면이를 다시 작성하는 방법을 잘 모르겠어요하지만 작업받은 이후 내가했습니다 DevTools로를 포함하는 풀 요청을 포함 this GitHub의 링크를 발견했다. 그러나, 나는 아직도 그것이 적용되는 방법과 let something = function(param1,param2)(function)으로 진행되는 것을 이해하지 못한다. 이 구문을 사용하면 반환 값이 applyMiddleware이 createStore으로 전송되지만 createStore 구문은 축소 기, initialState 및 확장자를 사용한다는 것을 알고 있습니다. 이것이 여기 어떻게 적용됩니까? redux-devtools documentation에서 다음 구문에 반대

import { createDevTools } from 'redux-devtools' 
import LogMonitor from 'redux-devtools-log-monitor' 
import DockMonitor from 'redux-devtools-dock-monitor' 

const DevTools = createDevTools(
    <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q"> 
    <LogMonitor theme="tomorrow" preserveScrollTop={false} /> 
    </DockMonitor> 
) 

let createStoreWithMiddleware = applyMiddleware(thunkMiddleware, api)(createStore) 

let store = createStoreWithMiddleware(quotesApp, DevTools.instrument()) 

구문은 나를 혼란.

initialState는 어떻게됩니까? the example에는 initialState에 대한 참조가 없습니다.

Answer 1

는 가게 증강 정의 서명은 대략 (applyMiddleware '의 정의에서 냈다) 다음과 같습니다

export default function applyMiddleware(...middlewares) { 
    return (createStore) => (reducer, preloadedState, enhancer) => { 
     // snip actual enhancer logic 

     return { 
      ...store, 
      dispatch 
     } 
    } 
} 

그래서, 인핸서 정의는 실제로 createStore 함수 자체에 대한 참조를받는 함수를 반환합니다.

어쨌든 사람들은 어딘지에서 매우 기능 지향적 인 호출 패턴을 복사 한 것으로 보이는데, 이는 실제로 이해하기 어렵습니다. 이전 버전의 문서에 있었는지 확실하지 않습니다. (이 preloadedState, 이름을 변경하려고의로, 또는) 특정 사용 패턴이 initialState을 정의하는 것을 허용하지 않습니다.

는 그래서 그래, 내가 생각하는 현재의 정의 패턴과 하나가 훨씬 더 읽을 수 있습니다 :

const middlewares = [thunk, myMiddleware]; 
const middlewareEnhancer = applyMiddleware(...middlewares); 
const enhancers = compose(middlewareEnhancer, someOtherEnhancer); 

const store = createStore(reducer, preloadedState, enhancers);