Redux 应用程序不工作

Question

我按照官方文档 http://redux.js.org/docs/basics/ 中的说明制作了 Redux 应用程序，但它不起作用。我有四个文件：store、reduction、action 和 build。

action.js:

export const ADD_TODO = 'ADD_TODO';
export const COMPLETE_TODO = 'COMPLETE_TODO';
export const ADD_FILTER = 'ADD_FILTER';

export const Filters = {
    SHOW_ALL: 'SHOW_ALL',
    SHOW_COMPLETED: 'SHOW_COMPLETED',
    SHOW_ACTIVE: 'SHOW_ACTIVE'
};

export function addTodo(text) {
    return {
        type: ADD_TODO,
        text
    };
};

export function completeTodo(index) {
    return {
        type: COMPLETE_TODO,
        index
    };
};

export function setFilter(filter) {
    return {
        type: ADD_FILTER,
        filter
    }
};

reducers.js:

import {Filters, ADD_TODO, COMPLETE_TODO, ADD_FILTER} from './action.js';
import {combineReducers} from 'redux';

function todos(state = [], action = null) {
    switch(action.type) {
        case ADD_TODO:
            return [
                ...state,
                {
                    text: action.text,
                    completed: false
                }
            ];
            break;
        case COMPLETE_TODO:
            return [
                ...state.slice(0, action.index),
                Object.assign({}, state.todos[action.index], {
                    completed: true
                }),
                ...state.slice(action.index + 1)
            ];
            break;
        default:
            return state;
        break;
    };
};

function filters(state = Filters.SHOW_ALL, action = null) {
    if(action && action.type == ADD_FILTER) {
        return action.filter;
    }
    else {
        return state;
    }
};

const todoApp = combineReducers({
    filters,
    todos
});

export default todoApp;

store.js:

import {todoApp} from './reducers.js';
import {createStore} from 'redux';
import {Filters, addTodo, completeTodo, setFilter} from './action.js';

let store = createStore(todoApp);

console.log(store.getState());

let unsubscribe = store.subscribe(function() {
    console.log(store.getState());
});

store.dispatch(addTodo('Learn action'));
store.dispatch(addTodo('Learn reducers'));
store.dispatch(addTodo('Learn store'));
store.dispatch(completeTodo(0));
store.dispatch(completeTodo(1));
store.dispatch(setFilter(Filters.SHOW_COMPLETED));

unsubscribe();

而且我有 webpack-build 文件。

var path = require('path');
var webpack = require('webpack');
var config = {
    context: path.join(__dirname), 
    entry: ['react', 'redux', './action', './reducers', './store'], 
    output: {
        path: path.join(__dirname, 'assets') 
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
        ]
    }
};
var compiler = webpack(config);
compiler.run(function (err, stats) {
    if(err) {
        console.log('Error:' + err);
    }
    else {
        console.log('Win');
    }
});

当我在控制台 return 中打开包含所有已编译代码的 HTML 页面时：SyntaxError: missing ; before statement。怎么了？

Answer 1

我将 let 替换为 'var' 并且成功了！

Redux 应用程序不工作

Redux app not work

javascript

reactjs

redux