ES6 语法模式下的 Redux 未定义答案

【问题标题】：Redux undefined in ES6 syntax modeES6 语法模式下的 Redux 未定义
【发布时间】：2017-09-12 03:16:48
【问题描述】：

我在使用 ES6 语法时未定义 Redux。但是，使用 import 语句可以正常工作。我该如何解决这个错误？

我正在使用入门工具包https://github.com/davezuko/react-redux-starter-kit 进行反应。

下面是代码。

Index.html

<!doctype html>
<html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.3.1/redux.js"></script>
        <script src="https://unpkg.com/react@0.14.7/dist/react.js"></script>
        <script src="https://unpkg.com/react-dom@0.14.7/dist/react-dom.js"></script>

        <title>React App</title>
      </head>
      <body>
        <div id="root"></div>

      </body>
    </html>

INDEX.JS

const todo = (state, action) => {
    switch(action.type) {
        case 'ADD_TODO':
            return {
                id: action.id,
                text: action.text,
                completed: false
            }
        case 'TOGGLE_TODO':
            if(state.id !== action.id){
                return state;
            }

            return {
                ...state,
                completed: !state.completed
            }
        default: 
            return state;
    }
};

const todos = (state = [], action) => {
    switch(action.type) {
        case 'ADD_TODO': 
            return [
                ...state,
                todo(undefined, action)
            ]
        case 'TOGGLE_TODO': 
            return state.map(t => todo(t, action));
        default: 
            return state;
    }
};

const {combineReducers} = Redux;

const todoApp = combineReducers({todos});
const { createStore } = Redux;
const store = createStore(todoApp);


const { Component } = Redux;

let nextTodoId = 0;

class TodoApp extends Component {
    render() {
        return (
            <div>
                <input type="text" ref={node => {
                    this.input = node;
                }} />
                <button onClick={() => {
                    store.dispatch({
                        type: 'ADD_TODO',
                        text: this.input.value,
                        id: nextTodoId++
                    });
                }}>
                Add Todo</button>

                <ul>
                    {this.props.todos.map(todo => 
                        <li key={todo.id}>
                            {todo.text}
                        </li>
                    )}
                </ul>
            </div>
        )
    }

}

const render = () => {
    ReactDOM.render(
        <TodoApp todos={store.getState().todos} />, 
        document.getElementById('root')
    );
}
store.subscribe(render);

render();

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

问题出在您定义 Component 的那一行。您正在尝试从没有它的 Redux 获取 Component。

应该是

const {Component} = React

出于好奇，您为什么要这样做，而不是使用导入？

【讨论】：

是的，这是错误的。但即使在组件 const 中将 Redux 更正为 React 之后，我仍然会收到此错误。我为什么用这个？我只是跟随一些很好的教程。 :)
combinReducers 的行。 Redux infact 第一行
你能分享那个教程的链接吗？