react-app-context
Application state manager based on PureComponent and React Context Api (React >= 16). Like Redux.
React context: https://reactjs.org/docs/context.html
Installation
npm i --save react-app-context
What is it?
It is one function
; //...const Provider connect Context } = ;// ...
Arguments
defaultState
- object, which contains initialize state
app: ... users: ... categories: ... // ...
actions
- object, which contains actions functions. Each action will get state as first argument and should return new object, which will be put to context object. Action can be async function or return Promise.
app: // all actions in this path will get Context.app state part ...state name: newName // ... users: // all actions in this path will get Context.users state part { ... } // ... // all actions in root will get full context state object ...fullState key: null // ...
property
- object with options
debug: false // if true, debug then messages will put to console
Function result
This function returns object with
Provider // react component connect // function to connect your react component to state Context // React Context Api object
Provider
- simple React pureComponent, which shoud be around components, which will be get state of this Provider.
// ... <Provider> <MainComponentOfApp /> </Provider>// ...
connect
- it is HOC function, which returns PureComponent above your component.
getNewState
- (state, props) => ({ ... })dispatchActions
- { myAction, ... }
// ... value: stateappvalue isFetching: stateapprequestspropsidisFetching myAction MyComponent;// ...
How can you use it as application state like Redux?
Storage initialize
// storageConfig.js;; const Storage = ; Provider;
Application storage
// appStorage.jsconst initState = value: 10 list: state: 'init' isLoading: false; { return ...state value: newValue ;} { // it is your api function, for example // `this` will contains // { // dispatch: function(function, statePropKey: string): function, - generates function with selected latest state // actionsMap: Map[function, function], - contains all registered Actions // call: function(function, ...args) - use to call Action // getState: function: object - get latest state // setState: function: Promise - works like setState of Component/PureComponent, but can be called like `await this.setState({ ... });` // } ; const newList = await myApi; return ...state // or ...this.getState() list: newList isLoading: false ;} const actions = setValue getData;
App root component
// App.jsx;;; { return // all Providers childs can use `connect` function from `./storageConfig` <Provider> <Toolbar /> </Provider> ;} ;
Example child component
// MyButton.jsx;;; PureComponent // `setValue` was described like `(state, newValue) => ...` // but will be dispatched into component without state arg // like `(newValue) => ...` thisprops; { const value = thisprops; return <button type="button" onClick=thisonClick> value </button> } value: stateappvalue // setValue will be put into component without first argument (it was `state`) setValue MyButton;
Using as state of component
react-app-context
can be used as external component state