reactive-state/src/example.js

"use strict";
var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var index_1 = require("./index");
var rxjs_1 = require("rxjs");
var initialState = {
    counter: 0,
    todoState: {
        todos: [{ id: 1, title: "Homework", done: false }, { id: 2, title: "Walk dog", done: false }],
    },
};
// create our root store
var store = index_1.Store.create(initialState);
// Log all state changes using the .select() function
store.select().subscribe(function (newState) { return console.log(JSON.stringify(newState)); });
// Any Observable can be an action - we use a Subject here
var incrementAction = new rxjs_1.Subject();
var incrementReducer = function (state, payload) { return state + 1; };
var decrementAction = new rxjs_1.Subject();
var decrementReducer = function (state, payload) { return state - 1; };
// while it looks like a magic string, it is NOT: 'counter' is of type "keyof AppState"; so putting
// any non-property name of AppState here is actually a compilation error!
var counterStore = store.createSlice("counter");
counterStore.addReducer(incrementAction, incrementReducer);
counterStore.addReducer(decrementAction, decrementReducer);
// dispatch some actions - we just call .next() (here with no payload)
incrementAction.next();
incrementAction.next();
decrementAction.next();
// wire up ToDos
var deleteToDoAction = new rxjs_1.Subject();
var deleteToDoReducer = function (state, payload) {
    var filteredTodos = state.todos.filter(function (todo) { return todo.id != payload; });
    return __assign(__assign({}, state), { todos: filteredTodos });
};
var markTodoAsDoneAction = new rxjs_1.Subject();
// This reducer purposely is more complicated than it needs to be, but shows how you would do it in Redux
// you will find a little easier solution using a more specific slice below
var markTodoAsDoneReducer = function (state, payload) {
    var todos = state.todos.map(function (todo) {
        if (todo.id != payload)
            return todo;
        return __assign(__assign({}, todo), { done: true });
    });
    return __assign(__assign({}, state), { todos: todos });
};
var todoStore = store.createSlice("todoState");
todoStore.addReducer(deleteToDoAction, deleteToDoReducer);
var reducerSubscription = todoStore.addReducer(markTodoAsDoneAction, markTodoAsDoneReducer);
markTodoAsDoneAction.next(1);
deleteToDoAction.next(1);
// now, using .createSlice() can be used to select the todos array directly and our reducer becomes less complex
// first, disable the previous complex reducer
reducerSubscription.unsubscribe();
// create a slice pointing directly to the todos array
var todosArraySlice = store.createSlice("todoState").createSlice("todos");
// create simpler reducer
var markTodoAsDoneSimpleReducer = function (state, payload) {
    return state.map(function (todo) {
        if (todo.id != payload)
            return todo;
        return __assign(__assign({}, todo), { done: true });
    });
};
todosArraySlice.addReducer(markTodoAsDoneAction, markTodoAsDoneSimpleReducer);
markTodoAsDoneAction.next(2);
deleteToDoAction.next(2);
//# sourceMappingURL=example.js.map