2017-01-04 3 views
0

Я пытаюсь реализовать перевождь с неизменными JS в моем angualar2 приложенииНевозможно создать Redux магазин в angular2

вот моя модель:

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.) 

enter image description here

Я не уверен, что я пропустил здесь, пожалуйста, помогите, чтобы он работал ..

ответ

1

Проблема вызвана этой линии в вашем TodoStore:

store = createStore(todoReducer); 

Типом store собственности выводится в Store и свойство является публичным. Однако Store не импортируется из redux, и это является причиной ошибки TypeScript.

Чтобы решить эту проблему, вы можете сделать частную собственность - действительно ли она должна быть общедоступной? - или может импортировать Store:

import { createStore, Store } from 'redux'; 

Для получения дополнительной информации см это GitHub issue comment.

Смежные вопросы