2017-01-25 2 views
0

저는 반응이 빠르고 webpack이라는 새로운 질문이 있습니다. 새로운 프로젝트를 시작했습니다.reactx가 redux-devtools에서 누락되었습니다.

\node_modules\redux-devtools\lib\ 

createDevTools.js 
index.js 
persistState.js 

가지고 있지만 react.js 때문에 실행이 폴더에 존재하지 다음 node_module에서

export function renderDevTools(store) { 
    if (__DEV__) { 
     let {DevTools, DebugPanel, LogMonitor} = require('redux-devtools/lib/react'); 
     return (
      <DebugPanel top right bottom> 
      <DevTools store={store} monitor={LogMonitor} /> 
      </DebugPanel> 
     ); 
    } 
    return null; 
} 

, 내가 볼 수 DevTool을 구성하려면, 우리는이 코드는 다음을 제공합니다 :

ERROR in ./app/utils/devTools.js 
Module not found: Error: Cannot resolve module 'redux-devtools/lib/react' 

나는 시도했다

npm install redux-devtools 

그러나 아직도 파일에서 반응이 없다. 이것은 레거시 코드이며, 실행하려고하면 작동하지 않습니다. 나는 무엇이 잘못되었는지 궁금합니다.

+0

이 레거시 코드는 아마도 이전 버전의 redux-devtools를 사용합니다. 가장 최신 버전은 https://github.com/gaearon/redux-devtools/blob/master/docs/Walkthrough.md –

+0

에서 동영상을 볼 수 있습니다.이 동영상에서는 redux devtool을 기본 반응 형 애플리케이션에 연결하는 방법을 설명합니다. - https://youtu.be/TSOVLXQPWgA – Prem

답변

1

이 코드는 [email protected]입니다. [email protected] 모니터는 redux-devtools-log-monitorredux-devtools-dock-monitor으로 분리되며, the docs에 표시된대로 설치하고 추가해야합니다.

plugins: [ 
    new webpack.DefinePlugin({ 
    '__DEV__': true 
    }) 
], 

쉬운 방법 앱에 직접 포함하는 것이 아니라 Chrome/Firefox extension을 사용 :

은 또한 당신은 (개발 및 생산을위한 달라야하는) webpack.configtrue__DEV__을 설정해야합니다. 그런 다음 당신은 당신의 돌아 오는 저장소 with just one line of code에 추가 할 수 있습니다 :

const store = createStore(reducer, /* preloadedState, */ 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 
); 

다른이 경우 돌아 오는 DevTools로에 관련된 모든 것을 제거해야합니다.

확장 프로그램을 사용하는 경우 프로덕션 without any edge cases에서도 사용할 수 있습니다. 그렇지 않으면 프로덕션 번들에서 해당 확장 프로그램을 제거해야합니다.

관련 문제