Hez
Flux architecture for React app. Fast and easy to use.
Hez requires React hooks, so you must install react 16.7+ and react-dom 16.7+ packages
Features
- No reducer
- No action creator
- Simple and reusable action logic
- Easy to write unit-test
Hez in action
- Compare to Redux https://codesandbox.io/s/53l6y55kmk
Counter app
import React from "react";import ReactDOM from "react-dom";import createStore useStore useActions from "./hez"; const initialState = count: 0; const store = ; const Up = state value state;const Down = state value state;const AddTen = ; const App = const count = ; const up down addTen = ; return <div> <h1>count</h1> <button =>Up</button> <button =>Down</button> <button =>Add 10</button> </div> ;; const rootElement = document;ReactDOM;
Create a store
import createStore from "hez"; const store = ;
Define an action
const AddTodo = state text state;
Dispatch an action
import useActions from "hez"; const AddTodoForm = const addTodo = ; { ; } return <button =>Add Todo</button>;;
Access state values
import useStore from "hez"; const TodoCount = const count = ; return <div>count</div>;;
Async actions
const SaveTodos = { return ;};
Reuse action logic
const AddOne = state;const AddTwo = { ; ;};
Using state.set
const state = ;state; // => 1state; // => 2// state.set(prevState => nextState);
Using state.merge
const store = ; const Add1 = state; // using merge will reduce your codeconst Add2 = state; // state.merge(prevState => nextState);
Using immhelper to update state
import update from "immhelper";import createState from "hez"; const state = ;state; // shorthandstate;
Printing state
import createState from "hez"; const state = ;console; // => [[Proxy]]console; // => { count: 1 }
Access state props
import createState from "hez"; const state = ;const count = state;const count2 = statecount;const count3 = state;const count4 = state;
Dispatching action and handling state change
import createStore from "hez"; const store = ; const Up = state value = 1 state; // handle changestore; store; // => { count: 1 }, Upstore; // => { count: 3 }, Up
Using useStore(store, selector, ...cacheKeys)
import React from "react";import createStore useStore withState from "hez"; const store = ;const TodoItem = id // component will re-render once state changed or received new id prop const text = ; return <div>text</div>;; const TodoHoc = ; const TodoItem = ;
Using useStoreMemo(store, cacheKeysSelector, stateSelector, ...extraCacheKeys)
import React from "react";import createStore from "hez"; const store = ; // selectorconst selectIds = stateids;const selectTodos = statetodos;const selectTodoList = ids todos ids; const TodoList = const todos = ; return <div>JSON</div>;;
Using withActions
import React from "react";import withActions from "hez"; const Up = ;const Down = ; const Counter = up down <div> <button =>Up</button> <button =>Down</button> </div>;
Using Provider to pass down store to component tree
As many frameworks, hez also supports Provider to passing down store
import React from "react";import Provider createStore useStore from "hez"; const store = ; const Counter = // dont need to call useStore(store, state => state.count); const count = ; return <div>count</div>;; const App = <Provider => <Counter /> </Provider>;
State props injection
You can inject state utilize method by using store.inject
Using immhelper for updating state
import update from "immhelper"; const store = ; store; const AddTodo = state text state;;
Using immer for updating state
import produce from "immer"; const store = ; store; const AddTodo = state text state;;
Listen another action dispatching
We can add listener which will be called when specified action dispatched. Use to clean up something
const Login = { ; ;}; const Logout = {}; const LoadProfile = { state; state;}; const LoadSettings = { state; state;}; const CleanProfile = { state;}; const CleanSettings = { state;};
Using reducer to update state
const state = ;const AddTodo1 = state text state;; const AddTodo2 = state text state;; const TodoReducers = state action if actiontype === "add" return ...state actionpayload; return state;;
Unit Test
import createState from "hez"; const Add = count set ; ;