默认参数作为 babeljs/reactjs 中的对象注入？

Question

我使用 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;
  }
}

存储/configureStore.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')
);

我的包.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;
  }
}

我的问题是：

1. 为什么我的默认参数被注入为 Object {} ？
2. 这是 babel 问题吗？
3. 我在这里做错了吗？

上面的代码只适用，当我把它改成下面的时候，

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;
  }
}

Answer 1

检查您的configureStore 函数：

export default function configureStore(initialState = {}) {
  // ...
}

您将initialState 设置为{}，因此如果window.__INITIAL_STATE__ 是undefined，您将获得{} 作为减速器的初始状态。 尝试将其更改为：

export default function configureStore(initialState = 0) {
  // ...
}

babel 输出没有问题。

Answer 2

在您的mapStateToProps 函数中，您首先需要从 Redux 状态中提取 count，如下所示：

function mapStateToProps(state) {
  return {
    counter: state.count
  };
}

Answer 3

未来：

空对象注入是由于我在 configureStore.js 中将 initialState 设置为 = {}，我将其更改为未定义，它就像一个魅力

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