|
| 1 | +# Freedux |
| 2 | + |
| 3 | +_Next generation global state management for React, without the bloat._ |
| 4 | + |
| 5 | +Freedux gives you a single, immutable, strongly typed object tree that can be |
| 6 | +used to store and manage the state of your application. This is a similar |
| 7 | +concept to redux, but unlike redux, the Api is super simple and requires hardly |
| 8 | +any set up to start using. |
| 9 | + |
| 10 | +## Features |
| 11 | + |
| 12 | +- Lightweight - 5k zipped |
| 13 | +- 0 dependencies |
| 14 | +- Modern hooks based API |
| 15 | +- Render optimization |
| 16 | +- APIs for usage outside of React |
| 17 | +- State data stored as plain JS primitives and objects |
| 18 | +- Strongly typed |
| 19 | + |
| 20 | +This project uses a fork from the |
| 21 | +[ts-object-path](https://github.com/Taras-Tymchiy/ts-object-path#readme) |
| 22 | +library. |
| 23 | + |
| 24 | +## Install |
| 25 | + |
| 26 | +```console |
| 27 | +npm install freedux |
| 28 | +``` |
| 29 | + |
| 30 | +## Usage |
| 31 | + |
| 32 | +### 1. Create your store |
| 33 | + |
| 34 | +```javascript |
| 35 | +import { createStore } from 'freedux'; |
| 36 | + |
| 37 | +// Define your initial state |
| 38 | +const initialState = { |
| 39 | + count: 0 |
| 40 | +}; |
| 41 | + |
| 42 | +// Create your store to retrieve some hooks |
| 43 | +const { useListener, useSetter } = createStore(initialState); |
| 44 | +``` |
| 45 | + |
| 46 | +### 2. Listen to state changes |
| 47 | + |
| 48 | +Use the `useListener` hook to select and inject state into your component: |
| 49 | + |
| 50 | +```javascript |
| 51 | +const CountDisplay = () => { |
| 52 | + const count = useListener(state => state.count); |
| 53 | + return <>{count}</>; |
| 54 | +}; |
| 55 | +``` |
| 56 | + |
| 57 | +### 3. Make updates |
| 58 | + |
| 59 | +Use the `useSetter` hook to update your store. You pass a function that returns |
| 60 | +the property you want to update. The hook returns a setter function to do that |
| 61 | +work: |
| 62 | + |
| 63 | +```javascript |
| 64 | +const CountButton = () => { |
| 65 | + const setCount = useSetter(state => state.count); |
| 66 | + return ( |
| 67 | + <button |
| 68 | + onClick={() => { |
| 69 | + setCount(5); |
| 70 | + }} |
| 71 | + > |
| 72 | + Set the counter to 5 |
| 73 | + </button> |
| 74 | + ); |
| 75 | +}; |
| 76 | +``` |
| 77 | + |
| 78 | +Those are the basics. Check out the [example](example.md) and |
| 79 | +[API docs](store.md), and happy coding! |
0 commit comments