import { createStateContainer , PureTransition } from '../../common/state_containers' ; export interface TodoItem { text : string ; completed : boolean ; id : number ; } export interface TodoState { todos : TodoItem [ ] ; } export const defaultState = { todos : [ { id : 0 , text : 'Learning state containers' , completed : false , } , ] , } ; export interface TodoActions { add : PureTransition < TodoState , [ TodoItem ] > ; edit : PureTransition < TodoState , [ TodoItem ] > ; delete : PureTransition < TodoState , [ number ] > ; complete : PureTransition < TodoState , [ number ] > ; completeAll : PureTransition < TodoState , [ ] > ; clearCompleted : PureTransition < TodoState , [ ] > ; } export interface TodosSelectors { todos : ( state : TodoState ) => ( ) => TodoItem [ ] ; todo : ( state : TodoState ) => ( id : number ) => TodoItem | null ; } export const pureTransitions = { add : ( state ) => ( todo ) => ( { todos : [ ... state . todos , todo ] } ) , edit : ( state ) => ( todo ) => ( { todos : state . todos . map ( ( item ) => ( item . id === todo . id ? { ... item , ... todo } : item ) ) , } ) , delete : ( state ) => ( id ) => ( { todos : state . todos . filter ( ( item ) => item . id !== id ) } ) , complete : ( state ) => ( id ) => ( { todos : state . todos . map ( ( item ) => ( item . id === id ? { ... item , completed : true } : item ) ) , } ) , completeAll : ( state ) => ( ) => ( { todos : state . todos . map ( ( item ) => ( { ... item , completed : true } ) ) , } ) , clearCompleted : ( state ) => ( ) => ( { todos : state . todos . filter ( ( { completed } ) => ! completed ) } ) , } ; export const pureSelectors = { todos : ( state ) => ( ) => state . todos , todo : ( state ) => ( id ) => state . todos . find ( ( todo ) => todo . id === id ) ?? null , } ; const container = createStateContainer < TodoState , TodoActions , TodosSelectors > ( defaultState , pureTransitions , pureSelectors ) ; container . transitions . add ( { id : 1 , text : 'Learning transitions...' , completed : false , } ) ; container . transitions . complete ( 0 ) ; container . transitions . complete ( 1 ) ; console . log ( container . selectors . todos ( ) ) ; export const result = container . selectors . todos ( ) ;