Rechyons
A library allows you use redux without writing actions and reducers, and still keep immutable Redux is no longer verbose
Migrate
Because I lost my 2 factor authentic token, this project has moved to https://github.com/zhouhanseng/rechyons
Motivation
Redux has one disadvantage: it is painfully verbose. Each time we want to add a feature, we needed to type a lot of lines for
- constants
- action types,
- action creators,
- action handlers in the reducer
- ...
Actually we bear this disadvantage for several years, and the situation seems to be getting worse. See verbose nightmare
It's time to rethink how to use redux. Why you need no Redux Saga
rechyons
, you no longer need the verbose lines above at all
With Rechyons makes redux state easy to update and retrieve like normal js object,meanwhile keep its immutable.
// updatehyperstore.user.update; // retrieve;
Usage
Example or a little bigger app
$ git clone git@github.com:ZhouHansen/rechyons.git
$ cd rechyons/example
$ yarn install
$ yarn start
Principle (8 minutes to read, easy than you imagine)
Install
Support both typescript and javascript
$ npm install rechyons
Antecedent
// your app tsconfig.json
Setup redux store and rechyons
rechyons
generate action and reducer for each of the state fields. Shape your initState's structure to this:
{
moduleA: {keyA: somevalue, keyB: somevalue, keyC: somevalue},
moduleB: {keyA: somevalue, keyB: somevalue, keyC: somevalue},
}
rechyons
exports two functions rechyons.reducer()
and rechyons()
.
rechyons.reducer()
takes your init state to generate 'user/name'
, 'user/age'
, 'animal/category'
, 'animal/weight'
four pair of action and reducer automatically. Then return the reducers to redux.combineReducers
to create the store.
rechyons()
swallows store.dispatch
for calling the designated actions.
// store.ts; ; ; ; ;
Get, bind and update state in component
rechyons(initState, store.dispatch)
returns a hyperstore
, hyperstore.user
and hyperstore.animal
both are instances of Rechyons
class.
// TestComponent;;; ; ;
Get data from state
store[hyperstore.user.name]
equals to initState.user.name
which is "zhc";
store[hyperstore.animal.weight]
equals to initState.animal.weight
which is 10; So we can use this to MapStateToProps()
Update state
Use hyperstore.user.update("name", "abc")
or hyperstore.user.update({"name": "abc"})
,
hyperstore.user.update("name", "abc")
对特指的 action 执行了store.dispatch({type: "user/name", "abc})
API
rechyons.reducer()
;; rechyons.reducer:ReducerType
rechyons.reducer()
return the reducers generated from initstate, so it only devotes to create redux store.
;
rechyons()
rechyons:
Each hyperstore.someModule
is a Rechyons instance
;; // hyperstore.user is one of the Rechyons instancesconsole.loghyperstore.user.name; // get the keyname output "user/name"console.logstore; // get the value output "zhc" hyperstore.user.update; // change stateconsole.loghyperstore.user.name; // output "abc"
Verbose nightmare
I want to add a like feature ❤ on the image people post in a social app like twitter.
state: //... effects: //... Thousands of lines * { const isLiked id = payload; if isLiked ; else ; ; } reducer: //... ;
In models/somemodule.js
, add a generator to commit actions in effects
object.
{ return type: "toggleLikeSuccess" payload: id isLiked ;}
In actions/somemodule.js
, define a new action.
state: //... effects: //... Thousands of lines reducer: //...Thousands of lines { const id isLiked = payload; return ...state list: list ; } ;
In models/somemodule.js
, add a reducer in reducer
object.
const mapDispatchToProps = dispatch toggleLikeMyImgTxt: ;
In components/somecomponent.js
, map dispatch
to props
.
Life is too heavy