无法在 angular2 中创建 Redux 存储

Question

我正在尝试在我的 angualar2 应用程序中使用不可变的 js 实现 redux

这是我的模型：

export class TodoModel {
    id: number;
    text: string;
    isCompleted: boolean;
};
export interface ITodoAction {
    type: string;
    todo: TodoModel;
}

这是行动

import { TodoModel, ITodoAction } from '../model/todo.model';
export function addTodo(todo: TodoModel): ITodoAction {
    return {
        type: 'ADD_TODO',
        todo
    };
}

export function removeTodo(todo: TodoModel): ITodoAction {
    return {
        type: 'REMOVE_TODO',
        todo
    };
}


export function completeTodo(todo: TodoModel): ITodoAction {
    return {
        type: 'TOGGLE_TODO',
        todo
    };
}

这是我的减速器

import { List } from 'immutable';
import { TodoModel, ITodoAction } from '../model/todo.model';

export const todoReducer = (state: List<TodoModel>, action: ITodoAction) => {
    switch (action.type) {
        case 'ADD_TODO':
            return state.push(action.todo);
        case 'REMOVE_TODO':
            return state.delete(findIndexById());
        case 'UPDATE_TODO':
            return state.update(findIndexById(), (todo) => {
                return {
                    id: todo.id,
                    text: todo.text,
                    isCompleted: todo.isCompleted
                };
            });
        case 'TOGGLE_TODO':
            return state.update(findIndexById(), (todo) => {
                return {
                    id: todo.id,
                    text: todo.text,
                    isCompleted: !todo.isCompleted
                };
            });
        default:
            return state;
    }
    function findIndexById() {
        return state.findIndex((todo) => todo.id === action.todo.id);
    }
};

这是我的商店

import { List } from 'immutable';
import { createStore } from 'redux';
import { ITodoAction, TodoModel } from '../model/todo.model';
import { todoReducer } from '../reducer/todo.reducer';

export class TodoStore {
    store = createStore(todoReducer);

    get todos(): Array<TodoModel> {
        return this.store.getState().toJS();
    }

    dispatch(action: ITodoAction) {
        this.store.dispatch(action);
    }
}

这是我使用商店的组件

import { Component, OnInit } from '@angular/core';
import { TodoStore } from '../../common/store/todo.store';
@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.css']
})
export class TodoComponent implements OnInit {
  // todo: TodoModel;
  constructor(private store: TodoStore) {
    // this.todo = new TodoModel();
  }

  ngOnInit() {
  }
}

但是当我运行我的应用程序出现错误

Module build failed: Error: F:/Tutorial/angular2/ngTutorial/src/app/common/store/todo.store.ts (7,5): Public property 'store
' of exported class has or is using name 'Store' from external module "F:/Tutorial/angular2/ngTutorial/node_modules/redux/in
dex" but cannot be named.)

我不确定我在这里遗漏了什么，请帮助让它正常工作..

Answer 1

问题是由您 TodoStore:

中的这一行引起的

store = createStore(todoReducer);

store 属性的类型被推断为 Store 并且属性是 public。但是，Store 不是从 redux 导入的，这就是 TypeScript 错误的原因。

要解决此问题，您可以将属性设为私有 - 它真的需要 public 吗？ - 或者可以导入 Store:

import { createStore, Store } from 'redux';

有关详细信息，请参阅此 GitHub issue comment。

无法在 angular2 中创建 Redux 存储

Unable to create Redux store in angular2

store

reducers

redux

angular