@mck-p/client-state

Overview

This package offers the handling of state along with creating helpers for modifying/dealing with that state via lenses

Usage

import {
  createDefaultState,
  createLenses,
  createReducer,
  createStore,
  createSchema,
  set,
  ofType
} from '@mck-p/client-state'

import { map } from 'rxjs/operators'

interface StateSchema {
  user: {
    name: string
    age: number
    profile: {
      location: string
    }
  }
}

const defaultData = {
  user: {
    name: 'John',
    age: 1,
    profile: {
      location: 'Knoxville, TN',
      some: {
        other: {
          nested: {
            and: {
              nested: {
                and: {
                  nested: {
                    thing: true // Nest as much as you want!
                                // The default state, schema, and lenses
                                // will be typed and built for you!
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

const schema = createSchema(defaultData)

const defaultState = createDefaultState(schema)
const lenses = createLenses(schema)

const handlers = {
  UPDATE_USER: [
    set<StateSchema, string>(lenses.user.name).as('Tim'),
    set<StateSchema, number>(lenses.user.age).using(
      (state, { payload }) => payload.age + 1
    ),
    set<StateSchema, string>(lenses.user.profile.location).with(
      (state, { payload }) => oldLocation => {
        const [city, state] = oldLocation.split(', ')
        return [city, payload.state].join(', ')
      }
    )
  ]
}

const epics = [
  actions$ =>
    actions$.pipe(
      ofType('UPDATE_USER'),
      map(action => ({
        payload: {
          from: 'async'
        },
        type: 'SOME_OTHER_TYPE'
      }))
    )
]

const middleware = [
  action => console.log('I am about to start handling this action ', action)
]

const reducer = createReducer(handlers)

const store = createStore<StateSchema>(defaultState, reducer, epics, middleware)

const action = {
  type: 'UPDATE_USER',
  payload: {
    age: 29,
    state: 'CA'
  }
}

store.subscribe(nextState => console.log(nextState))

store.dispatch(action)

/**
 * Eventually will print:
 *
 *
I am about to start handling this action  { type: 'UPDATE_USER', payload: { age: 29, state: 'CA' } }
{
  user: {
    name: 'Tim',
    age: 30,
    profile: { location: 'Knoxville, CA', some: [Object] }
  }
}
I am about to start handling this action  { payload: { from: 'async' }, type: 'SOME_OTHER_TYPE' }