React Localux 🐬 — context and hooks based store for React, TypeScript-friendly
React Localux (RL) is comfortable solution for separation store-related logic from react components. Unlike Redux main goal for RL is being home for compact local stores of smart components. Based on useReducer
and new Context API.
For example, you might have screen-like component of some item with vast logic related to this screen and it is required to support several different stacked screens of such items. Implementing such feature with global Redux store result complicated code, but it turns out that using single local store for each screen produces quite straightforward solution.
React 16.8+ only, because it uses hooks (useReducer mainly). For React < 16.8 see v1.
Main features
- Compact creation of store: just declare state, methods (combination of reducers and actions) and effects
- Thunk-like actions support — effects
- Default state support (handy for unit-testing)
- Redux dev tools logging support
- TypeScript first! Typings for all methods and effects for free.
- API based on hooks
- Lightweight: ~2.2 Kb non-gzipped and uglified
example.tsx)
Example code (fromnpm i react-localux constate
// example-store.ts; // example-store.ts; ; ; ; // example.tsx /** * If you need just slice of state and do not want re-renders * on other state parts change, you can do such optimization with useMemo **/
Also see tests.
Similar solutions
- No TypeScript support and due to API design decision for actions it is not possible to make types
- No async actions support
- Not very performant code on store creation
Alveron is really good lib with good documentation:
- No TypeScript support and due to API design decision for actions it is not possible to make types (looks like it is possible now with TS 3.7)
- No redux dev tools logging
- No async actions support built-in
- No redux dev tools logging
- API based on ambiguous immer (immer adds 4.3 Kb gzip). Immer adds performance penality on every action call, up to 15x on browsers without Proxy and 2x-3x on others.
— It is more "put any hook inside context" then complete store solution. — No default state support, which is usefull for unit-testing.
That's why this library has been born. 👭
Credits
Thanks to @viventus for helpfull discussions.
Thanks to Constate library for simple solution for placing hooks inside context.