React iFlow
The connector for React 🌈 iFlow state management.
React iFlow If you use React and iFlow to manage state, save all kinds of selectors cumbersome, while supporting a variety of user-defined store.
🔥🔥🔥It is a highly efficient and concise React and iFlow store connector🔥🔥🔥
Features and benefits
- Least possible time selector
- Automatic array diff
- Full support comprehensive selector
- Support immutable
Install
yarn add react-iflow//ornpm install --save react-iflow
Getting started
To Edit
The Gist
index.js
ReactDOM
store.js
const pipe = const store = pipe
body.js
{ return <div> <button onClick= thispropsstore>-</button> thispropsstorecounter <button onClick= thispropsstore>+</button> </div> } storeBody
Examples
React with iFlow examples Counter(Online) TODO(Online)
API
flow
It's the standard connector of iFlow store
flow
is higher-order function,and it supports the decorator's writing. If the last one argument of the flow is store
, then the connected store will take it precedence.
- Selector: In fact, in most cases, 🎉🎉🎉you don't need to use selectors🎉🎉🎉, because iFlow will automatically help you diff state to determine if the component is updated, unless you need to compute derived data.
- Higher-order functions
{}CustomComponent
If use Provider
, you don't need to pass the store argument, unless you need to set the selector.
{}CustomComponent
More concise way
{}
- Class decorator
@ {}
- User-defined select node store
@ {}
- With array selectors functions
@ {}
- With arguments selectors functions
@ {}
provider
ReactDOM
Provider
depend on the react'scontext
to complete the cross component transfer, and its role is exactly the same as react-redux's Provider if you are familiar with react-redux
connect
{}
When you call Provider
inject store, you can use connect
API to quickly connect store to the component, it's simple.
immutable
- Single-layer immutable store is effective when using immutable
@immutable
is a single-layer traversal props, so the mixed structure of the iFlow store and plain objects is invalid.
For example:
// this.props.sub is iflow store { return <Sub store=thispropssub /> } @immutable // omit
This is effective. But the following example is not valid:
// this.props.sub is iflow store { const store = foo:'bar' sub: thispropssub return <Sub store=store /> } @immutable // omit
Of course, if you're not using @immutable
You can arbitrarily pass the iFlow store.
- About the Usage of PureComponent
Because the iFlow connector uses the mutable store by default, So the connector directly with the React.PureComponent connection will not be updated, iFlow connector corresponding component should be react.Component, do not worry, iFlow will automatically diff comparison, it is more efficient and automatic than the light comparison of React.PureComponent.
If you really need to use react.PureComponent, then it is recommended that you could use cooperatively with @immutable
. This is a great help in Sub-Component performance optimization.
For example:
@@immutable { return <div> <button onClick= thispropsstore>-</button> thispropsstorecounter <button onClick= thispropsstore>+</button> </div> }
License
MIT