Angular 2 Application Architecture - Building Flux Apps with Redux and Immutable.js

01.ts

{
    todos:[
        {
            "id":1,
            "description":"TODO 1",
            "completed":false
        },
        {
            "id":2,
            "description":"TODO 2",
            "completed":false
        }
    ],
    uiState: {
        actionOngoing: false,
        message: "Ready"
}

02.ts

function addTodo(newTodo: Todo) {
    return {
        type: ADD_TODO,
        newTodo
    }
}
function toggleTodo(todo: Todo) {
    return {
        type: TOGGLE_TODO,
        todo
    }
}

03.ts

function todos(state: List, action) {
    switch(action.type) {
        case ADD_TODO:
            return state.push(action.newTodo);
        case TOGGLE_TODO:
            return toggleTodo(state, action);
        ...
        default:
            return state;
    }
}

04.ts

function uiState(state: List, action) {
    switch(action.type) {
        case BACKEND_ACTION_STARTED:
            return {
                actionOngoing:true,
                message: action.message
            };
        case BACKEND_ACTION_FINISHED:
           ...
    }
}

05.ts

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

06.ts

import {createStore, applyMiddleware} from 'redux'; 

const createStoreWithMiddleware = 
    applyMiddleware(createLogger())(createStore);

const store = createStoreWithMiddleware(
    todoApp,
    {
        todos:List([]),
        uiState: initialUiState
    });
    
    

07.ts

import {ReduxStore} from "angular2-redux-store";

@Injectable()
class TodoStore extends ReduxStore {
    constructor() {
        super(store);
    }
}

08.ts

class TodoList {
    constructor(private store: TodoStore) {
    }
    toggleTodo(todo) {
        this.store.dispatch(toggleTodo(todo));
    }
}

09.ts

let todo1 = {
  id:1,
  description: "TODO 1",
  completed: false
};

let list = Immutable.List([todo1]);

10.ts

let todo2 = {
  id:2,
  description: "TODO 2",
  completed: true
};
let list2 = list.push(todo2); // this list now has two elements

11.ts

let todo = Immutable.Map({
    id:1, 
    description: "TODO 1", 
    completed:false
});

12.ts

let TodoRecord = Immutable.Record({
    id: 0,
    description: "",
    completed: false
});

13.ts

const TodoRecord = Record({
    id: 0,
    description: "",
    completed: false
});

class Todo extends TodoRecord {
    constructor(props) {
        super(props);
    }
}

14.ts

class Todo extends TodoRecord {
    id:number;
    description:string;
    completed: boolean;

    constructor(props) {
        super(props);
    }
}

15.ts

class Todo extends TodoRecord {
    id:number;
    description:string;
    completed: boolean;

    constructor(props) {
        super(props);
    }
}

16.ts

let todo:Todo = new Todo({id: 1, description: "I'm Type Safe!"});