bradfordlemley

export default function createBase(initialState){
  let state = initialState;
  let state$ = new Observable();

  function setState(newState) {
    state = newState;
    state$.next(state);
  }

  function updateState(update) {

bradfordlemley

test("Adds todos", () => {
  const todoLib = createTodoLib();
  
  todoLib.addTodo("First todo");
  expect(todoLib.state.todos).toHaveLength(1);
  expect(todoLib.state.activeTodos).toHaveLength(1);
  expect(todoLib.state.completedTodos).toHaveLength(0);
  
  todoLib.addTodo("Second Todo");
  expect(todoLib.state.todos).toHaveLength(2);

bradfordlemley

import { connect } from '@stated-library/react';
import { appState$ } from './state';

const App = ({addTodo, allTodos, visibleTodos}) =>
  <>
    <button onClick={() => addTodo("New todo")}>
      Add Todo
    </button>
    <div>All todos: {allTodos.map(todo => <div>{todo.title}</div>)}</div>
    <div>Visible todos: {visibleTodos.map(todo => <div>{todo.title}</div>)}</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,

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 { 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 { 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

export default function createTodoLib() {

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

  function setState(newState) {
    state = newState;

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,
  };
  
  return {
    get state() {return state},
    addTodo(title) {