Silo-React

React state manager based on redux


Quick start

``jsx harmony
import { createSiloStore, Provider, connect } from 'silo-react'
const store = createSiloStore()

store.createPath('todos', {
initialState() {
return {
list: [],
}
},
get: {
count: ({ state }) => state.list.length,
},
set: {
add({ state }) {
return {
...state,
list: state.list.concat({ title: todo title ${state.list.length + 1}, id: state.list.length })
}
}
},
onSet(payload) {
// payload with tracker
},
action: {
async fetchList({ set }) {
return new Promise(res => setTimeout(() => set.add()), 10)
}
},
})

class Todos extends React.Component {
componentDidMount() {
this.props.action.fetchList()
}
render() {
return

ReactDOM.render(



, document.getElementById('__content'))
`

Redux Middleware

`jsx harmony
const logger = s => next => action => {
console.log(action)
return next(action)
}
const store = createSiloStore({}, applyMiddleware(logger)(createStore))
`

Global exec path methods

`jsx harmony
store.getState('todos') // Get "todos" state
store.exec('action:todos/fetchList', ...params) // exec action with params
store.exec('get:todos/count', ...params) // exec get
store.exec('set:todos/add', ...params) // exec set
`

Action Records in development

`jsx harmony
const trackerRule = ({ path, type, method }) => ${type}:${path}/${method}
const store = createSiloStore({}, undefined, trackerRule)
store.createPath('myPath', {
action: {
act1({ action }) {
return action.act2()
},
act2({ action }) {
return action.act3()
},
act3({ tracker }) {
return tracker.records()
}
}
})
expect(store.exec('action:myPath/act1')).toEqual(["action:myPath/act1", "action:myPath/act2", "action:myPath/act3"])
`

Inject context arguments

`jsx
const store = createSiloStore()

store.createPath('myPath', {
action: {
act({ myContext }) {
console.log(myContext) // my context
}
},
injectArgs(defaultArgs) {
return {
...defaultArgs,
myContext: { / my context /}
}
},
})
``