react-redux-just
-
Get easy access to your storage.
-
Access and change any of the variables you want, at any depth.
-
Quickly create handlers for your variables.
-
Create and process requests, use loaders.
-
Light callbacks when changing within a component.
Installing
$ npm install react-redux-just
Usage
Create a provider at the beginning of your application.
Use <ProviderStore>
to initialize the store.
ReactDOM;
withConnectStore(component, model)
Use withConnectStore
to connect to the store.
Specify in the argument the component and the element you want to monitor.
{ return <div> user </div>} App 'user'
Use several simple variables at once for their storage.
Specify an [array]
as an argument, and specify the required variables in it.
( <ul> <li> user: {user} </li> <li> user: date </li> <li> user: version </li> </ul>) Component 'user''date.start:date''version'
Initial stores
You can create a data model for Initial Values.
const model = state: user: 'Name' date: start: version: 10 ReactDOM;
Objects
in the store
const model = state: theme: primary: warn: 'yellow' secondary: warn: 'red'
{ const handleClick = const warn = primary return <button onClick=handleClick style=color:warn backgroundColor> Click me! </button>} Component theme:'primary' secondary:'warn:backgroundColor'
You can rename the callable parameter for the current component using a friendly name (more on this below)
or you can refer directly to "warn"
Component theme: primary:'warn'
Component 'theme.primary.warn'
mapModelToProps
in the store
Initialize the model to connect the desired variables or objects to the component
Specify the __options
key in a variable or object
toProps:true
- Creates an edit action for the current object
Specify the function as an argument to get the actual state of the parameter
{ const handleClick = { // name 'color' for the current component only (mapModelToProps) } const handleClickColor = { } return <ReactFragment> <button onClick=handleClick style= color backgroundColor > Click me! </button> <button onClick=handleClickColor> Click me set color yellow! </button> </ReactFragment> }const mapModelToProps = theme: colorMain: 'color' // Rename for current component backgroundColor: true // (true || undefined )- pull backgroundColor __options: toProps:true Component mapModelToProps
Options
__options
and other possibilities in the mapModelToProps
Rename
Rename the parameters for the current component
const mapModelToProps = theme: __options: toProps:true // Create action for object ( { theme, setTheme } = props ) colors: 'red:color' // Pull out of the object and rename for current component ( { color, setColor } = props ) backgroundColor: '*bgColor' // Rename for current component ( { themeBgColor, setThemeBgColor } = props ) // * - object level 1 up, ** - name add level 2 up, *** ... sizes: font: 'fontSize!' // Rename for current component ( { themeSizesFontSize, setThemeSizesFontSize } = props ) // ! - Specify all levels of the object in the name weight:undefined // ( { weight, setWeight} = props ) Component mapModelToProps
dispatch(next, prov, options)
Calling handlers on change
Using the dispatch
option Create a handler that will be called before changes in the store
When we specify only the settings, then there is no need to write toProps
const mapModelToProps = size: __options: min:0 { const min = options return next>=min?next:0 } Component mapModelToProps
Specify your options and use them in the handler
Coming handler arguments: new value, previous value, options
receiving(value)
Create an receiving
handler, before the variable gets into the component, it will go through the handler. The store will not change
( <span> Status:{status} </span>)const mapModelToProps = status: __options: bool Component mapModelToProps
__options
when initializing a state
You can also create handlers when initializing a state
requests(new Promise)
Create a data request with ease
const model = state: date: __options: type: 'date' value: date { ; } ReactDOM;
When creating a request, a [Name]Loader
is automatically generated
If an error occurs on request, pass it via reject. [Name]RequestError
{ if dateLoader return <span> Load </span> if dateRequestError return <span> Error </span> return <span> date </span>}Component 'date'
More actions
set[Name]Callbacks(next=>{}, [])
In addition to change, callbacks, replacements and cleanup are also available.
If you want to use an extra variable in callback, then specify it.
{ const handlerClick = return <div> <span> login </span> <button onClick=handlerClick> setLogin </button> </div> }Component 'login' 'date'
set[Name].replace(newValue)
Replaces an object or parameter with a new value
set[Name].clear
type | new value |
---|---|
string | ' ' |
number | 0 |
bool | false |
array | [ ] |
object | { } |
function | ( ) => { } |
set[Name].delete
Removes the parameter completely (undefined)
// style:{ // height: 100 // marginLeft: 10, // fontSize: 10, // }
// style:{ // height: 100 // marginLeft: 15, // fontSize: 10, // marginRight:15 // }
setStyle// style:{// height: 100// fontSize: 10,// }
setStyleclear// state = {// style:{}// }
setStyle// style: undefined
Basic actions
When a component is connected to the store, an action is created to change the called variables.
A common actions setState
is also connected to change any element in the store.
With the help of the setState
you can change any variable and objects in the store.
{ const handleClick = { } const handleClickSecond = {
The setCount
and setDataCount
only change the variable count
or dataCount
.
You can also use the "classic version" of the formation of mapStateToProps
.
... ( <span> {user} </span>) const mapStateToProps = { return user } Component mapStateToProps
You can also configure mapDispatchToProps
.
Component mapStateToProps mapDispatchToProps
Other options state model
const model = state: status: false ... options: devTools: false // default 'development'
License
MIT