Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork8
A tiny (495B) immutable state management library based on Immer
License
jaredpalmer/mutik
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A tiny (495B) immutable state management library based on Immer
yarn add mutik
or
Table of Contents
To use Mutik with React, you'll need to install React and React DOM from the experimental release channel because Mutik uses the recently-mergeduseMutableSource hook internally.
yarn add react@experimental react-dom@experimental
importReactfrom'react';import{render}from'react-dom';import{createStore,Provider,useSelector}from'mutik';// Create a lil' store with some stateletstore=createStore({count:0,});// Pass the store to the Provider.functionApp(){return(<Providerstore={store}><div><Label/><Buttons/></div></Provider>);}// You can mutate the store from anywhere you want to,// even outside of React code. Mutate is based on immer.functionincrement(){store.mutate(state=>{state.count++;});}// Or you can update it like React.useState's updatefunctiondecrement(){store.set(prevState=>({ ...prevState,count:prevState.count-1});}// You don't need to pass the store down as a prop eitherfunctionButtons(){return(<React.Fragment><buttononClick={decrement}>-</button><buttononClick={increment}>+</button></React.Fragment>);}// Lastly, you can subcribe to "slices" of state with useSelector// Note: be sure to memoize these with React.useCallback if you need to select based on propsfunctionLabel(){constselector=React.useCallback(state=>state.count,[]);constcount=useSelector(selector);return<p>The count is{count}</p>;}render(<App/>,window.root);
Create a Mutikstore given some initial state. Thestore has the following API you can use in or out of React.
| Method | Description |
|---|---|
get() | Get the current state. Do not use this inside of React, you should instead useuseSelector |
set(nextState: S | (prevState: S) => V): void; | Set state. This can either take a new value or and updater function (just like React.useState's updater) |
on(listener: Function): () => void; | Subscribe to store. Pass in a callback function that will be executed on updates.on() returns the unsubscribe function for your convenience. |
off(listener: Function): void; | Unsubscribe a given listener function |
reset(): void | Set state back to theinitialState used when creating the store |
mutate(updater: (draft: Draft) => void | S): void; | Immer-style updater function. |
React hook to subscribe to Mutik state. Must be called underneath a MutikProvider.
constselector=state=>state.count;functionLabel(){constcount=useSelector(selector);return<p>The count is{count}</p>;}
You can use props with Mutik selector. For performance, it's a good idea to memoize the selector withReact.useCallback. For example:
functionUser({ id}){constselector=React.useCallback(state=>state.users[id],[id]);constuser=useSelector(selector);return<p>The username is{user.name}</p>;}
Mutik context provider. Pass your store asstore prop. For example:
importReactfrom'react';import{createStore,Provider}from'mutik';// Create a lil' store with some stateletstore=createStore({count:0,});// Pass the store to the Provider.functionApp(){return(<Providerstore={store}><div>{/* ... stuff */}</div></Provider>);}
- Jared Palmer@jaredpalmer
MIT License
About
A tiny (495B) immutable state management library based on Immer
Topics
Resources
License
Contributing
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors5
Uh oh!
There was an error while loading.Please reload this page.