hooxigene
- An unfancy straight forward state manager for react hooks applications.
Installation
npm install --save hooxigene
Usage
Create pretty & easy-to-understand reducer-like objects
immer
, a new state object is created.
Notice that it seems like you "mutate" the data you change. You treat it as if it was a mutation in your code, but thanks to the power of // baseReducer.js name: 'base' initialState: modal: null handlers: statemodal = modal statemodal = null ; // userReducer.js name: 'user' initialState: id: '' local: email: '' name: '' password: '' confirm_password: '' plan: 'free' active: true is_logged_in: false role: null error: message: '' type: '' handlers: statelocal = ...statelocal ...payload { stateid = id; staterole = role; stateis_logged_in = true; } stateis_logged_in = true { stateid = ''; stateis_logged_in = false; staterole = null; } staterole = 'admin' stateerror = error stateerror = ...stateerror type: '' message: '' stateactive = !stateactive ; // dashboardReducer.js name: 'dashboard' initialState: siteId: null textEditor: mode: 'edit' // [ edit, preview ] category: activeCategory: null list: {} // { [category]: [] } dictionary: currentPhrase: '' defByPhrase: {} handlers: statesiteId = site_id statetextEditormode = mode statecategoryactiveCategory = activeCategory statecategorylistcategory = delete statecategorylistcategory statecategorylistcategory ... ... ... ;
createStore
Create your store passing your reducer-like objects using // store.js;;;; base user dashboard;
StoreProvider
// index.js;;;;; const App = <StoreProvider store=store viewer=true /> <AppRouter/> </StoreProvider>; ReactDOM;
StoreProvider
should wrap the app in the top level, so the store data will be available throughout the whole app.props
:store
- pass a store holding the app state. the store should be created using thecreateStore
function supplied behooxigene
.viewer
-hooxigene
usesreact-state-trace
library, which is a great devtool that let's you view your app state as it changes and break it to pieces.viewer
is a boolean flag. when explicitly set totrue
, it shows the viewer at the top right of the app. Pressshift + s
to show or hide the devtool when you use it.
getState
& `getDispatch
Consuming the store & dispatching actions - ;;; const MODES = EDIT: 'edit' PREVIEW: 'preview'; const TextEditor = { const mode = ; const dispatch = ; return <div> Object </div> ;}; ;
-
getState
exposes your app state. Make sure to call it inside a component or a function, because the nature ofhooks
inreact
require it.- You pass the name you gave the reducer-like object. In our example it could be
dashboard
,user
orbase
. - If you have nested properties you do not have to destructure the object, you can simply separate the path using commas
.
. For example you can do any of the following four and it is the same:const mode = getState('dashboard.textEditor.mode');
const { mode } = getState('dashboard.textEditor');
const { textEditor: { mode } } = getState('dashboard');
const { dashboard: { textEditor: { mode } } } = getState();
- When you use
getState
without a reducer-like object name, you get the whole state object.
- You pass the name you gave the reducer-like object. In our example it could be
-
getDispatch
exposes your app dispatcher / actions. As withgetState
, make sure to call it inside a component or a function. - You pass the name you gave the reducer-like object. In our example it could bedashboard
,user
orbase
.:- You pass the name you gave the reducer-like object. In our example it could be
dashboard
,user
orbase
. - You can access a specific reducer-like object dispatcher directly. For example you can do any of the following four and it is the same:
const dispatch = getDispatch('dashboard');
const dispatch = getDispatch().dashboard;
- When you want to dispatch an action to change the state you call
dispatch('SET_TEXT_EDITOR_MODE', { mode: 'edit' })
.- First argument is the type of the action which you defined as a key on
handlers
in your reducer-like object. - Second argument is the payload which is passed to the handler itself as the second parameter:
handlers: { SET_TEXT_EDITOR_MODE: (state, { mode }) => state.mode = mode, }
.
- First argument is the type of the action which you defined as a key on
- You pass the name you gave the reducer-like object. In our example it could be