[英]Default parameters are injected as object in babeljs/reactjs?
My reactjs setup with babeljs is show below 我的使用babeljs的reactjs设置如下所示
My action.js 我的action.js
export function onIncrement() {
return {
type: 'INCREMENT'
};
}
export function onDecrement() {
return {
type: 'DECREMENT'
};
}
container/App.js 容器/App.js
import React, { Component, PropTypes } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as CounterActions from '../actions';
class App extends Component {
render() {
const { counter, actions } = this.props;
return (
<div>
<p>
Clicked: {counter} times
</p>
<p>
<button onClick={actions.onIncrement}>
+
</button>
</p>
<p>
<button onClick={actions.onDecrement}>
-
</button>
</p>
</div>
);
}
}
App.propTypes = {
counter: PropTypes.number.isRequired,
actions: PropTypes.object.isRequired
};
function mapStateToProps(count) {
return {
counter: count
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(CounterActions, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(App);
containers/root.js 容器/root.js
import React, { Component, PropTypes } from 'react';
import { Provider } from 'react-redux';
import App from './App';
export default class Root extends Component {
render() {
const { store } = this.props;
return (
<Provider store={store}>
<App />
</Provider>
);
}
}
Root.propTypes = {
store: PropTypes.object.isRequired
};
Reducer/index.js Reducer / index.js
export default function counter(count = 0, action) {
console.log(count) // this comes as object {}
console.log(action) // initially it as { type: '@@INIT'}
switch (action.type) {
case 'INCREMENT':
return count + 1;
case 'DECREMENT':
return count - 1;
default:
return count;
}
}
store/configureStore.js 存储/配置Store.js
import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers';
export default function configureStore(initialState = {}) {
// thunkMiddleware to handle async actions in redux
const middlewares = [thunkMiddleware];
// chrome devtool extension
let devtool;
if (NODE_ENV === 'development') {
// redux-logger to log the redux state events in window.console
const logger = createLogger({
duration: true
});
middlewares.push(logger);
// devtools - redux-chrome extension
devtool = window.devToolsExtension ? window.devToolsExtension() : undefined;
}
// store - combines reducers and enchancements to redux using middlewares
const store = createStore(
rootReducer,
initialState,
devtool,
applyMiddleware(...middlewares)
);
// hot module replacement for only for reducers
if (module.hot) {
module.hot.accept('../reducers', () => {
// default - as es6 to es5 transpile in babel make the module to export as
// module.export = somemodule.default
const nextRootReducer = require('../reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}
my main.js 我的main.js
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import Root from './containers/Root';
import configureStore from './store/configureStore';
const initialState = window.__INITIAL_STATE__;
const store = configureStore(initialState);
render(
,
document.getElementById('root')
);
My Package.json 我的Package.json
& i am using webpack for bundling and babel for transpiling. 我正在使用webpack进行捆绑,而使用babel进行转译。
When i initially run this application on i get this error below, 当我最初在上运行此应用程序时,出现以下错误,
Further investigate this issue, i found the transpiled code as show below 进一步调查这个问题,我找到了如下所示的转码
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = counter;
function counter() {
var count = arguments.length <= 0 || arguments[0] === undefined ? 0 : arguments[0];
var action = arguments[1];
console.log(count, "count"); // this comes as object {}
console.log(action, "action"); // initially it as { type: '@@INIT'}
switch (action.type) {
case 'INCREMENT':
return count + 1;
case 'DECREMENT':
return count - 1;
default:
return count;
}
}
My Question is: 我的问题是:
The above code only works, when i change this to below, 上面的代码仅在我将其更改为下面时有效,
export default function counter(count = 0, action) {
console.log(count , "count") // this comes as object {}
console.log(action, "action") // initially it as { type: '@@INIT'}
switch (action.type) {
case 'INCREMENT':
return count + 1;
case 'DECREMENT':
return count - 1;
default:
return 0;
}
}
In your mapStateToProps
function, you first need to extract count
from Redux state like this : 在mapStateToProps
函数中,您首先需要像这样从Redux状态提取count
:
function mapStateToProps(state) {
return {
counter: state.count
};
}
future: 未来:
That empty object injection is due to i am setting the initialState to = {} in configureStore.js, i changed that to undefined, it worked like a charm 空对象注入是由于我在configureStore.js中将initialState设置为= {},我将其更改为undefined,它就像一个魅力
import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
import thunkMiddleware from 'redux-thunk';
import rootReducer from '../reducers';
export default function configureStore(initialState) {
// thunkMiddleware to handle async actions in redux
const middlewares = [thunkMiddleware];
// chrome devtool extension
let devtool;
if (NODE_ENV === 'development') {
// redux-logger to log the redux state events in window.console
const logger = createLogger({
duration: true
});
middlewares.push(logger);
// devtools - redux-chrome extension
devtool = window.devToolsExtension ? window.devToolsExtension() : undefined;
}
// store - combines reducers and enchancements to redux using middlewares
const store = createStore(
rootReducer,
initialState,
devtool,
applyMiddleware(...middlewares)
);
// hot module replacement for only for reducers
if (module.hot) {
module.hot.accept('../reducers', () => {
// default - as es6 to es5 transpile in babel make the module to export as
// module.export = somemodule.default
const nextRootReducer = require('../reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}
For more details: https://github.com/reactjs/redux/issues/1502#issuecomment-194151490 有关更多详细信息: https : //github.com/reactjs/redux/issues/1502#issuecomment-194151490
Check your configureStore
function: 检查您的configureStore
函数:
export default function configureStore(initialState = {}) {
// ...
}
You setting initialState
to {}
, so if window.__INITIAL_STATE__
is undefined
you will get {}
as initial state of your reducer. 您将initialState
设置为{}
,因此,如果undefined
window.__INITIAL_STATE__
,您将获得{}
作为减速器的初始状态。 Try to change this to: 尝试将其更改为:
export default function configureStore(initialState = 0) {
// ...
}
There is no problems with babel output. babel输出没有问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.