Work on bothReact andReact-Native

Example:

Installation

yarn

npm

My recommended Pattern

Recommended Directory Structure:

store/actions/store/stores/store/index.jsstore/storeActions.jsstore/storeNames.js

Step 1: Create new store (Redux like)

import{createStore}from"react-redux-global-state-manager";// List of Constant Typesconsttypes={SET_TOKEN_INFO:"SET_TOKEN_INFO",};// define store with name,initialState and reducerconsttoken=createStore("token",// unique name for this token store{// initialize state objecttoken:null,public_key:"",expire_in:"",login_time:""},(state,action)=>{// define reducer// when a reducer is being used, you must return a new state valueswitch(action.type){casetypes.SET_TOKEN_INFO:return{          ...state,          ...action.payload};default:returnstate;}});export{token,types};//export token reference and types

Step 2: Create action file

import{types}from"../stores/token.store.js";consttoken={setTokenInfo:data=>{return{type:types.SET_TOKEN_INFO,payload:data};}};export{token};

Step 3: Add exportedstores andactions respectively tostoreNames.js andstoreActions.js

import{token}from"./stores/token.store.js";import{profileInfo}from"./stores/profileInfo.store.js";// ------ use this object as store identifier invoker in whole appconststoreNames={  token,  profileInfo,};// ------export{storeNames};// export this object as container for all of our stores.

import{token}from"./actions/token.action.js";import{profileInfo}from"./actions/profileInfo.action.js";// ------ use this object as action function invoker in whole appconststoreActions={  token,  profileInfo,};// ------export{storeActions};// export this object as container for all of our Actions.

Step 4: Create one EntryPoint for your store

import{useStore,readOnlyStore,dispatchDirectly}from"react-redux-global-state-manager";import{storeNames}from"./storeNames.js";// All stores referencesimport{storeActions}from"./storeActions.js";// All actions references// ------export{storeNames,storeActions,useStore,readOnlyStore,dispatchDirectly};

Final Step:

import"./store/index.js";// load stores once time in begin of your app

Using store in our components

Import required functions from entry point at/store/index.js

import{storeNames,// access all stores referencestoreActions,// access all actions functionsuseStore,// hook - use this in functional component and return [state,dispatch]readOnlyStore,// just return current store value in non-component functionsdispatchDirectly// To access dispatch in non-component functions}from"../store/index";

For use infunctional Components:

const[state,dispatch]=useStore(storeNames.token);const[profileInfo,dispatch_pi]=useStore(storeNames.profileInfo);// To call dispatch: dispatch() just take one object. best-practice is to call action functionconstdata={token:"402790c1-ec61-4b10-9613-6b926529d0f2",public_key:"24d6e775def2404fb21a34fdd8a4e4b0",expire_in:"2019-12-14T22:39:10.222Z",login_time:"2019-12-13T10:20:15.222Z"}dispatch(storeActions.token.setTokenInfo(data))

const[{token,public_key,expire_in},dispatch]=useStore(storeNames.token);

For use in regular functions (None-Component functions):

Read:

//read whole token object out of component function, using store name referenceconsttoken=readOnlyStore(storeNames.token);

Write:

//call dispatch function directly out of component functions. this function take 2 params.//arg1= store reference,//arg2= action function that return object.dispatchDirectly(storeNames.token,storeActions.token.setTokenInfo(tokenData));

Functions

Please subscribe and contribute with me to develop this lib

Notice: