Unable to create Redux store in angular2

Question

I am trying to implement redux with immutable js in my angualar2 application

here is my Model :

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

here is action

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

here is my reducer

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

here is my store

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

here is my component on which I have use store

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() {
  }
}

But when I run my application I got the error

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

I am not sure what I missing here, please help to get it working..

Answer 1

The problem is caused by this line in your TodoStore:

store = createStore(todoReducer);

The type of the store property is inferred as Store and the property is public. However, Store is not imported from redux and that's the reason for the TypeScript error.

To solve the problem, you could either make the property private - does it really need to be public? - or could import Store:

import { createStore, Store } from 'redux';

For more information, see this GitHub issue comment.