Conventional-redux.js
Conventional-redux.js is a library for small and medium applications, it wraps the react-redux and provides API based on convention over configuration pattern. It is NOT new flux implementation so everything is in 100% compatible with standard redux approach.
The idea
- Remove boilerplate code by adding conventions
- Don't break any redux rule/idea
- Handle basic stuff automatically with ability to override
The difference (counter example)
Standard redux module
// ------------------------------------// Constants// ------------------------------------const COUNTER_INCREMENT = 'COUNTER_INCREMENT' // ------------------------------------// Actions// ------------------------------------ { return type: COUNTER_INCREMENT payload: value } const doubleAsync = { return { return { } }} const actions = increment doubleAsync // ------------------------------------// Action Handlers// ------------------------------------const ACTION_HANDLERS = COUNTER_INCREMENT: state + actionpayload // ------------------------------------// Reducer// ------------------------------------const initialState = 0 { const handler = ACTION_HANDLERSactiontype return handler ? : state}
Conventional-redux interactor
// initial state { return 0; } // actions: { } // reduce methods: { return thisstate + 1; } { return thisstate * 2; }
Standard redux component + container
const mapActionCreators = doubleAsync const mapStateToProps = counter: statecounter const Counter = <div> <h2>propscounter</h2> <button onClick=propsincrement> Increment </button> <button onClick=propsdoubleAsync> </button> </div> mapStateToProps mapActionCreatorsCounter
Conventional-redux connected component
const Counter = <div> <h2></h2> <button onClick=> Increment </button> <button onClick=> </button> </div> } Counter 'counter';
Standard redux approach (explicit)
- Define component
- Define actions
- Define reducer
- Define mapActionCreators
- Define mapStateToProps
- Define container
- Connect!
Conventional-redux approach
- Define component
- Define interactor
- Connect!
Remember that you can combine these two approaches! Use convetional way for simple parts of your application, but when you need more control over what is going on, pure redux should be better!
Example live application
Check out an example app with code snippets here. The code is available here.
Functionalities list
Auto define actions
The library automatically defines actions based on reduce methods. Check out live example.
{ return 0; } // You can still define increment by your own (but not need to)! // increment() { // console.log('test'); // } { return thisstate + by; } { return thisstate * 2; } // dispatch examples:// this.dispatch('counter:increment');// this.d('counter:increment', 10);// this.d('counter:double');
Auto handle for promises
Automatically handling for promises resolve and reject. Check out live example.
{ return 0; } { // need to return promise return } { return loading: true } { console; } { return user: userResponse } { return error: errormessage }
Interactor external dependencies
You can define an array of external dependencies to modify interactor state after non interactor actions. Check out live example.
{ return on: 'LOGOUT' call: 'onClear' } { return {}; }
Interactor computed actions
You can define a computed actions array to call additional dispatch after specific actions. In the following example the action always fires after projects:fetch
or gists:fetch
.
Check out live example.
{ return after: 'projects:fetch' 'gists:fetch' dispatch: 'filters:update' with: 'projects.languages' 'gists.languages' } { // it fires after gists or projects fetch with resolved args }
Static and dynamic interactors
Interactors can be static or dynamic. You cannot remove once registered static interactor. Dynamic interactors can be remvoed or replaced, the right moment to manage dynamic interactors is ROUTE_CHANGE
action. A good example of static interactor would be CurrentUserInteractor
, of dynamic - route based interactors like ProjectsInteractor
, SettingsInteractor
etc.
Check out live example.
// static, somewhere before connect:; // dynamic { ;} // dynamic setup, configuring store;
Connect interactors
It connects interactors (state) to a specific component. Check out live example.
Component { return <div> <h2>this</h2> <button onClick= this> Increment </button> <button onClick= this> </button> </div> } Counter 'counter';// or connect all (not recommended)Counter;
Installation
1. Npm install
npm install conventional-redux --save
2. Add conventional-redux middleware
;const middleware = conventionalReduxMiddleware thunk
Code example: https://github.com/mjaneczek/conventional-redux-demo/blob/master/app/configureStore.js#L12
3. Set recreate reducer function (needed only if using dynamic interactors)
;
Code example: https://github.com/mjaneczek/conventional-redux-demo/blob/master/app/configureStore.js#L35
4. Replace combineReducers with conventional-redux wrapper
; return ; // the first parameter is a default combined reducers hash// the second is a pure combineReducers function from redux or redux-immmutable
Code example: https://github.com/mjaneczek/conventional-redux-demo/blob/master/app/reducers.js#L20
Example application
https://mjaneczek.github.io/conventional-redux-demo/
Deprecation note
The previous version of the library 0.2.2 has been deprecated. There are many breaking changes while migrating to 1.0, please be careful while updating. The outdated code is here: https://github.com/mjaneczek/conventional-redux/tree/0.2.2-outdated
Contributing
- Fork it ( https://github.com/mjaneczek/conventional-redux/fork )
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create a new Pull Request