CyanX

CyanX is a minimalist, extensible state manager for functional components based on ReactHook

Design philosophy – Should any state, no matter where it is, be easily and quickly obtained

features

• Minimal, one minute to get started, two lines of code
• Infinite layering eliminates complex value transfers between components
• Very low memory consumption, data is loaded on demand, and the component is rerendered only when the required state values change
• Based on ReactHook, only React functional component development is supported

Compatible with the environment

Modern browsers and IE11

[img-kfbntbyC-1597115377927] (README_files/1.png)

The installation

• npm

$ npm install cyanx

• yarn

$ yarn add cyanx

The core concept

Public Store

A repository for state used by multiple components

The type of data stored

• Value types: String, Number, Boolean, Null, Undefined, Symbol
• Reference data types: Object, Array, Function
• Function method

withCyanxObserver

Observe the specified public repository & an observable that uses state in this public repository. When a state value in the public repository changes, the observable that uses this state is re-rendered

WithCyanxObserver (Component, publicStoreName, publicStoreDefaultValues) is a high-level component HOC with three parameters

withCyanxObservable

Put the component into an observable state and get the desired state of the common warehouse (stored in props). When the state value of the used common warehouse changes, it will automatically re-render and get the latest state of the common warehouse

WithCyanxObservable (Component, publicStoreName, stateKeyArray) is a high-level component HOC with three parameters

Dispatch

Dispatch is a function used to change the state of a public repository

Characteristics of the

• Each common repository will have a unique Dispatch function

• The dispatch will reside in the props of the observable component with the function name ${common repository name} dispatch; Or an object named ${name of the common repository} in the props of the observable component. Here is an example of the dispatch element: There is a public repository publicStore, and the observable component C looks at the public repository publicStore; Observable component C access to public warehouses publicStore dispatch through the two ways can get: props. PublicStoreDispatch | | props. PublicStore. Dispatch

• The state change rule for dispatch, same as the setState() function in React

The instance

constant

Const PublicStoreName = 'publicStore'; Const publicStoreDefaultValues = {a: 1, b: {}, c: ()=>{},} const publicStoreDefaultValues = {a: 1, b: {}, c: ()=>{},}Copy the code

Set up the observer component & common repository to observe

import { withCyanxObserver } from 'cyanx'; Const ComponentObserver = () => {... return ( <> <ComponentObservable /> </> ) } export default withCyanxObserver(ComponentObserver, PublicStoreName, publicStoreDefaultValues);Copy the code

Transform observable components & the state of the common repository required by components

import { withCyanxObservable } from 'cyanx'; Const ComponentObservable = ({a, b, c, publicStoreDispatch,... props}) => {... } || const ComponentObservable = (props) => { const {a, b, c, dispatch} = props.publicStore; } export default withCyanxObservable(ComponentObservable, PublicStoreName, ['a', 'b', 'c']);Copy the code

Matters needing attention

For memory reasons, it is recommended that the children of the observer component at the next level be converted to observable components

GitHub

Github.com/Bholder/Cya…

License

MIT

Copyright © 2020-present, Bholder CY