bradfordlemley

function createCounter() {  
  
  let counter = 0;
  
  return {    
    get counter() { return counter },
    increment() { counter = counter + 1},
    decrement() { counter = counter - 1},
  }
}

bradfordlemley

function createTodoLib() {
  
  let todos = [];
  let isFetching = false;
  
  return {
    get todos() {return todos},
    get isFetching() {return isFetching},
    addTodo(title) {
      todos = todos.concat({title});

bradfordlemley

export default function createCounter() {  
  
  let state = 0;
  
  return {    
    get state() { return state },
    increment() { state = state + 1},
    decrement() { state = state - 1},
  }
}

bradfordlemley

export default function createTodoLib() {
  
  let state = {
    todos: [],
    isFetching: false,
  };
  
  return {
    get state() {return state},
    addTodo(title) {

bradfordlemley

export default function createCounter() {
  
  let state = 0;
  let state$ = new Observable();
  
  function setState(newState) {
    state = newState;
    state$.next(state);
  }
  

bradfordlemley

export default function createTodoLib() {

  let state = {
    todos: [],
    isFetching: false,
  };
  let state$ = new Observable();

  function setState(newState) {
    state = newState;

bradfordlemley

import { mapState } from '@stated-library/core';

const todoLib = createTodoLib();
const counterLib = createCounter();

const appState$ = mapState(
  [todoLib.state$, counterLib.state$],
  ([todoLibState, counterLibState]) => ({
    todos: todoLibState.todos,
    counter: counterLibState,

bradfordlemley

import { appState$ } from './state';

const App = ({todos, counter, total}) =>
  <>
    <div>counter: {counter}</div>
    <div>todos: {todos.map(todo => <div>{todo.title}</div>)}</div>
    <div>total: {total}</div>
  </>
                           
export default connect(appState$)(App);

bradfordlemley

import { appState$, todoLib } from './state';

const App = ({todos, counter, total}) =>
  <>
    <button onClick={() => todoLib.addTodo("New todo")}>
      Add Todo
    </button>
    <div>counter: {counter}</div>
    <div>todos: {todos.map(todo => <div>{todo.title}</div>)}</div>
    <div>total: {total}</div>

bradfordlemley

import { mapState } from '@stated-library/core';

const todoLib = createTodoLib();
const counterLib = createCounter();

const appState$ = mapState(
  [todoLib.state$, counterLib.state$],
  ([todoLibState, counterLibState]) => ({
    todos: todoLibState.todos,
    counter: counterLibState,