[英]Default parameters are injected as object in babeljs/reactjs?
我的使用babeljs的reactjs设置如下所示
我的action.js
export function onIncrement() {
return {
type: 'INCREMENT'
};
}
export function onDecrement() {
return {
type: 'DECREMENT'
};
}
容器/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);
容器/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
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.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;
}
我的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')
);
我的Package.json
我正在使用webpack进行捆绑,而使用babel进行转译。
当我最初在上运行此应用程序时,出现以下错误,
进一步调查这个问题,我找到了如下所示的转码
"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;
}
}
我的问题是:
上面的代码仅在我将其更改为下面时有效,
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;
}
}
在mapStateToProps
函数中,您首先需要像这样从Redux状态提取count
:
function mapStateToProps(state) {
return {
counter: state.count
};
}
未来:
空对象注入是由于我在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;
}
有关更多详细信息: https : //github.com/reactjs/redux/issues/1502#issuecomment-194151490
检查您的configureStore
函数:
export default function configureStore(initialState = {}) {
// ...
}
您将initialState
设置为{}
,因此,如果undefined
window.__INITIAL_STATE__
,您将获得{}
作为减速器的初始状态。 尝试将其更改为:
export default function configureStore(initialState = 0) {
// ...
}
babel输出没有问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.