pure-store

Just edit your app's state.

pure-store

Comparison with redux

With React Hooks

pure-store

usePureStore

const store = createStore({ count: 0 })

export default ()=> { const [state, update] = store.usePureStore()

return (

If you use react, then congratulations - you know everything you need to to manage state in your app. Because the data is updated immutably, you can pass pieces of the store's state to your

Without Hooks

To use

pure-store

createStore(initialState)

Creates a new store with an initial state. You can create multiple independent stores, although usually one is enough.

import createStore from 'pure-store'

const store = createStore({ count: 0 })

If you're using typescript, you can get type checking and autocompletion automatically with the rest of your

pure-store

const state: State = { user: getUser(), messages: [] }

const store = createStore(state) ```

state

/

getState()

Returns the current state from the store.

console.log("last message date:", store.getState().lastMessageAt)

const Messages = ()=> {
  const { user, messages, lastMessageAt } = store.state
  return (
    

      
Messages for {user.name}
      

        {
          messages.map(m=> (
            
          ))
        }
      
    
  )
}

update(updater)

Use this anytime you want to update store data. The

updater

setState

store.update({ lastMessageAt: new Date() })

store.update(s=> {
  s.messageCount++
  s.messages.push(message)
  s.lastMessageAt = new Date()
})

subscribe(callback)

To re-render components when you update the store, you should subscribe to the store. The

subscribe

The recommended way is to re-render your whole app -

pure-store

React.PureComponent

store.subscribe(render) render() ```

You could also use forceUpdate within a component e.g.:

javascript
class App extends React.Component {
  constructor() {
    store.subscribe(()=> this.forceUpdate())
  }
  //...

bonus:

storeFor(getter)

,

updaterFor(getter)

, and usePureStore(getter)

These methods let you define a subset of the store as a shortcut, so you don't have to reference the whole chain every time.

console.log(store.user.profile.address.city)
store.update(s=> s.user.profile.address.city = "Wellington")

// vs
const addressStore   = store.storeFor(s=> s.user.profile.address)
const addressUpdater = store.updaterFor(s=> s.user.profile.address)
// and then:
console.log(addressStore.state.city)
addressUpdater(a=> a.city = "Wellington")

Which can be useful in larger projects.

Patterns

Actions

Other state management libraries have a concept of using 'actions' and 'action creators' for controlled state updates. You may well find them unnecessary, but if you miss them, you can easily do something similar:

// actions.js
import store from './store'
export function postMessage(text) {
  store.update(s=> {
    s.messages.push({
      user: s.user,
      text
    })
    s.lastMessageAt = new Date()
  })
}

// component.js
  //...
   postMessage(this.props.text)} />
  //...

Persistence

If you want to persist data between sessions, it can be done very simply. You just need a way to serialize and de-serialize your data. If you use only basic data types, you can use

JSON.stringify

JSON.parse

const store = createStore(storedData || getDefaultData())

window.addEventListener("beforeunload", ()=> { localStorage.setItem(STORAGE_KEY, JSON.stringify(store.state)) }) ```

Future

pure-store