2016-05-18 2 views
1

я следовал за tutorial, однако, я получаю сообщение об ошибке консоли:Получение Redux DevTools Работать

«Ошибка: Ожидаемый редуктор быть функцией»

Вот мой (отношение) конфигурации:

WEBPACK.CONFIG.JS:

... 
const TARGET = process.env.npm_lifecycle_event; 
process.env.BABEL_ENV = TARGET; 
... 
if(TARGET === "start" || !TARGET) { 
    module.exports = merge(common, { 
     devtool : "inline-source-map", 
     devServer : { 
      contentBase : PATHS.build, 
      hot : true, 
      progress : true, 
      stats : "errors-only" 
     }, 
     plugins : [ 
      new webpack.HotModuleReplacementPlugin(), 
      new webpack.DefinePlugin({ 
       "process.env.NODE_ENV" : JSON.stringify("production") 
      }) 
     ] 
    }); 
} 

index.js:

import React from "react"; 
import { render } from "react-dom"; 
import { Provider } from "react-redux"; 
import configureStore from "./modcon/ConfigureStore.js"; 
import MainInterface from "./component/Main.jsx"; 
import DevTools from "./component/devTools/DevTools.js"; 

export const store = configureStore(); 

let initialise =() => { 
    render(
     <Provider store = { store }> 
      <div> 
       <MainInterface /> 
       <DevTools />     
      </div> 
     </Provider>, 
    ); 
}; 
initialise(); 

CONFIGURESTORE.JS:

if (process.env.NODE_ENV === "production") { 
    module.exports = require("./ConfigureStore.prod"); 
} else { 
    module.exports = require("./ConfigureStore.dev"); 
} 

CONFIGURESTORE.DEV.JS:

import { createStore, applyMiddleware, compose } from "redux"; 
import reducer from "./Reducers.js"; 
import DevTools from "../component/devTools/DevTools"; 

const enhancer = compose(
    DevTools.instrument() 
); 

export default function configureStore(initialState) { 
    const store = createStore(reducer, initialState, enhancer); 
    console.log(module.hot); 
    if (module.hot) { 
     module.hot.accept("./Reducers",() => 
     store.replaceReducer(require("./Reducers")/*.default if you use Babel 6+ */)); 
    } 
    return store; 
} 

Im не ясно, что я делаю неправильно. Thanks

ответ

5

Наличие редукционного инструмента для мониторинга журналов на моей странице было немного разочаровывающим. Поэтому я нашел хром-плагин под названием Redux DevTools.

Все, что вам нужно для начала использования, это просто установить этот плагин и изменить createStore для decux, используя функцию компоновки.

Пример:

const finalCreateStore = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f 
)(createStore) 
+0

Благодарим вас, пожалуйста, объясните 'f => f', какова цель этой функции? – Kayote

+1

@Kayote Цель состоит в том, чтобы иметь функцию по умолчанию в случае, если нет devToolsExtension. Таким образом, эта функция 'f => f' просто продолжает сокращать цепочку промежуточного программного обеспечения. –

+0

В этом видео объясняется, как подключить devtool к приложению response redux - https://youtu.be/TSOVLXQPWgA – Prem

1

Я была такая же проблема и ниже код работает для меня.

const enhancers = compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f 
); 
const store = createStore(rootReducer, defaultState, enhancers);