I followed the tutorial, however, am getting the console error:
“Error : Expected the reducer to be a function“
Here is my ( relevant ) configuration:
WEBPACK.CONFIG.JS:
JavaScript
x
22
22
1
2
const TARGET = process.env.npm_lifecycle_event;
3
process.env.BABEL_ENV = TARGET;
4
5
if( TARGET === "start" || !TARGET ) {
6
module.exports = merge( common, {
7
devtool : "inline-source-map",
8
devServer : {
9
contentBase : PATHS.build,
10
hot : true,
11
progress : true,
12
stats : "errors-only"
13
},
14
plugins : [
15
new webpack.HotModuleReplacementPlugin(),
16
new webpack.DefinePlugin({
17
"process.env.NODE_ENV" : JSON.stringify( "production" )
18
})
19
]
20
} );
21
}
22
INDEX.JS:
JavaScript
1
21
21
1
import React from "react";
2
import { render } from "react-dom";
3
import { Provider } from "react-redux";
4
import configureStore from "./modcon/ConfigureStore.js";
5
import MainInterface from "./component/Main.jsx";
6
import DevTools from "./component/devTools/DevTools.js";
7
8
export const store = configureStore();
9
10
let initialise = () => {
11
render(
12
<Provider store = { store }>
13
<div>
14
<MainInterface />
15
<DevTools />
16
</div>
17
</Provider>,
18
);
19
};
20
initialise();
21
CONFIGURESTORE.JS:
JavaScript
1
6
1
if (process.env.NODE_ENV === "production") {
2
module.exports = require("./ConfigureStore.prod");
3
} else {
4
module.exports = require("./ConfigureStore.dev");
5
}
6
CONFIGURESTORE.DEV.JS:
JavaScript
1
18
18
1
import { createStore, applyMiddleware, compose } from "redux";
2
import reducer from "./Reducers.js";
3
import DevTools from "../component/devTools/DevTools";
4
5
const enhancer = compose(
6
DevTools.instrument()
7
);
8
9
export default function configureStore( initialState ) {
10
const store = createStore( reducer, initialState, enhancer );
11
console.log( module.hot );
12
if (module.hot) {
13
module.hot.accept("./Reducers", () =>
14
store.replaceReducer(require("./Reducers")/*.default if you use Babel 6+ */));
15
}
16
return store;
17
}
18
Im not clear on what I am doing wrong. Thanks
Advertisement
Answer
Having a redux dev tools log monitor over my page was a little bit frustrating. So I found an chrome plugin called Redux DevTools.
All all you need to start using it is simply install this plugin and modify redux’s createStore using compose function.
Example:
JavaScript
1
4
1
const finalCreateStore = compose(
2
window.devToolsExtension ? window.devToolsExtension() : f => f
3
)(createStore)
4