AllStore

© 2018-present Harald Rudell (http://www.haraldrudell.com)

 

Single-truth store in 94% less code-lines

Demonstration Project: Demo-Context-Store

 Live

 source code

Allstore source code

Allstore npm package link

$3

* Single-truth store as plain object
* useAllstore React 16.7 hook or traditional connect high-order component
* Defaults to pure components, support for traditional components

$3

* Store manipulation via ECMAScript module imports
* No name-collision via import aliasing and configurable store-slice names
* Use of React 16.3 context and internal subscription mechanic

 

Published using Lib Create React App that allows React components to be publicly published as npm packages

click for Video presentation, 10 min

 

$3

* yarn add allstore

import { Store } from 'allstore'

export default () =>
<Store store={{value: 1}}>
…
</Store>

 

import { store, Store } from 'allstore'

Object.assign(store, {value: 1})

export default () =>
<Store>
…
</Store>

 

import { OrderedMap, Map } from 'immutable'

import { store, useAllstore } from 'allstore'

let sliceName1 = 'records' // modifiable to avoid collisions setSlicename(s)

const setRecords = list => store[sliceName1] = OrderedMap(list.map(o => [o.id, Map(o)]))

const recordsSelector = (state, {id}) => ({record: state[sliceName1].get(id)})

const getRecord = r => (r && r.toJS()) || {}

setRecords([{id: 1, record: 'One'}, {id: 2, record: 'Two'}])

function DisplayRecord({id}) {

 const {record: map} = useAllstore(recordsSelector, {id})

 const {record} = getRecord(map)

 return <div>id: {id} record: {record || ''}</div>

}

$3

import { store, Store, useAllstore, connect, notify, getState, subscribe, storeContext, StoreProvider, StoreConsumer } from 'allstore'

* Store: component that makes the store context available, see Usage
* const {storeProps…} = useAllstore(mapStateToProps, {props…}, [pure: false]): React 16.7 hook, see Usage
props to Component
* connect(mapStateToProps, options)(Component): provides store properties as
* mapStateToProps(Object state, Object props) Object: defines what props the wrapped component needs based on the store state and its other props
* options: {displayName: string, pure: boolean: default true}
* store: plain store object
* notify() all components evaluate the new store state for redraw
* subscribe() subscription for store changes, typically only used by connect or useAllstore
* getState() gets the store plain object to allow for modifications

 

* storeContext for a class that wants to access the store context, used by connect
* StoreProvider StoreConsumer for custom rendering of the React 16.3 context

 

link: Hire Harald Rudell

link: Sponsor Harald Rudell

 

Lib Create React App creates shareable libraries from projects bootstrapped with Create React App.

© 2018-present Harald Rudell (http://www.haraldrudell.com)