React Hooks View Model
A lightweight library for modeling global state changes with reducer-like functions using React Hooks.
Motivation
In a sufficiently complex React app one might encounter any number of the following concerns around state management:
- Async updates to state e.g. fetching data to render from an API
- Computing values from state often called "selectors" or "derived state"
- Sharing state across components without tons of props boilerplate
- Hard to compose and test business logic around state
Often the solution to this problem is introducing Redux, with a number of additional libraries like Redux-Thunk, Reselect, etc. The basic value prop of this set up is that you can now easily write testable/composable pure functions that can easily share the same piece of global state.
However this value prop comes with an opinionated architecture that encourages patterns like writing switch statements which must be careful to return immutable data, decomposing functons across sub-branches of state, the reducer/action creator split, provider components and dispatch, etc. The result of this architecture often leads to unecessary boilerplate and exposing the logic around state changes in unobvious ways.
React Hooks has gone a long way towards making it easy to use all functional patterns for components and local state, but it doesn't provide the benefit Redux does of a simple shared global state and patterns for encouraging writing code in pure functions.
This library providers a few wrapper functions around React Hooks that covers all of the concerns above in a way that encourages pure functions and a simple single global state object.
Example
Define your view model
// Intialize state with props from a top-level componentconst initialState = loading: false page: 0 todos: // Write easy to test/compose state-in-state-out reducersconst addTodo = ...state todos: statetodos const loading = ...state loading: true const doneLoading = ...state loading: false // You can also write "async reducers" that remove state update boilerplateconst fetchTodos = async { const todos = await // You're always welcome to compose these from other pure reducer functions return ...state todos: todos } // Write easy to test/compose selectors that return values from derived stateconst completedTodos = statetodos const incompleteTodos = statetodos // Chain reducers that share the same arguments with state updates inbetween const initTodos = loading fetchTodos doneLoading initialState addTodo: fetchTodos: completedTodos: incompleteTodos: initTodos:
Initialize the model at the top-level component and wrap with the . Then use the model to call the wrapped functions for state updates.
const TodoList = { const completedTodos incompleteTodos Provider = todoModel return <ul> </ul>} const Todos = { const addTodo fetchTodos initTodos state } = todoModel return <div> stateloading ? 'Loading...' : <TodoList /> <button onClick= > Add milk todo </button> <button onClick= > Load more </button> </div> } const Main = { const Provider = todoModel return <Provider><Todos></Provider>}