The boilerplate killer for Redux.
About
The package is in early development. Please don't use it in production.
Developer Experience
The main goal of this package is to improve developer experience.
Installation
To install the stable version:
yarn add redux-from-void
Preparation
// Creating a wrap.const wrap = // Wrap our store. { return }
Using
Actions
A Simple Action
// Create reactions(). This is an action factory. First argument must be wrap().const pageLoaded = // And export. // Now we can dispatch the action without compose() with redux dispatch().// In Redux DevTools it will be the action with PAGE_LOADED type.
An Action With Children
// Create reactions(). This is an action factory. First argument must be wrap().// Second argument is an array of a name for children.const login } = ; // And export. // Now we can dispatch the action and its children. // LOGINlogin // LOGIN_SUCCEEDEDlogin // LOGIN_FAILED
Dispatching An Action
Flux architecture. https://github.com/redux-utilities/flux-standard-action
// { type: 'ACTION', payload: undefined } // { type: 'ACTION_WITH_VALUE', payload: 'value' } // { type: 'ACTION_WITH_OBJECT', payload: { key: 'value' } }action // { type: 'ACTION_CHILD', payload: [ 1,2,3 ] } actiontype // ACTIONactionWithValuetype // ACTION_WITH_VALUEactionWithObjecttype // ACTION_WITH_OBJECTactionchildtype // ACTION_CHILD
A Reaction Set
Sometimes there is need for a set of reactions and its children.
const $et = const login logout } = ; // $et equals [ login, logout ]// $et.succeeded equals [ login.succeeded, logout.succeeded ] // $et.failed equals [ login.failed, logout.failed ]
Additional params
Reducers
A Simple Reducer
Reducer is a smart reducer. It merges state and prev state into one.
const initialState = isEditableMode: false // The first argument must be an initialState.const reducer = // Every sequence of arguments contains: // 1. one or more actions from reactions(); // 2. branch (handler). // The branch finish sequence. Every branch must return an object that will be merge to prev state. editableModeToggled // This is an action. isEditableMode: !stateisEditableMode // This is a branch. editableModeSetted isEditableMode: newValue anotherAction // action anotherAction2 // action anotherAction3 // action initialState // One branch for multi actions.
Default initial state
By default createReducer will create a reducer with initialState { allIds: [], byId: {} }
const reducer = ...
If createReducer takes function it will be calling with default initialState
const initFunction = ...anotherState const reducer = ...
Types Of Branches
- Branch is an object (set without merge).
... action ... ...
- Branch is a function that return an object (merge).
// The first argument is a prev state, the second one is an action.... action ... ...
- Branch is a function that return an another function that return an object (set without merge).
// The first argument is a prev state, the second one is an action.... action ... ...
Selectors
A Simple Selector
createSelect
return tuple of:
forSelect
A service function. Must be calling with an initialState.select
A core selector with selectors for every keys in an initialState.
// createSelect() takes a function that return a slice of the state. const forSelect select = // Decorate the initialState. After that select will has selectors for every properties.const initialState = // State:const globalState = ... someReducer: property1: false property2: 100 // Using // { property1: false, property2: 100 } select // falseselect // 100
A Smart Selector
const forSelect selectEntity = const initialState = // State:const globalState = ... domainReducer: allIds: 1 byId: 1: key: 'value' // The second argument is an entity id. // { allIds: [ 1 ], byId: { 1: { key: 'value' } } }selectEntitykey // 'value'selectEntity // [ 1 ]
Reducer with a selecor init function
createReducer
may takes an init function instead an initial state
const forSelect selectEntity = const reducer = ... // State:const globalState = ... domainReducer: allIds: byId: {} ... // { allIds: [], byId: {} }
To be continue...
License
MIT