Remind ðŸ§
npm install react-remind # or yarn add react-remindInitializing State
The first argument is the initial state and the second is the actions that access functions such as set and get as described below
import remind from 'react-remind'
const { useRemind } = remind({ ideas: [] }, (set, get) => ({
sendAnIdea: (idea) => set((mind) => ({ ideas: [...mind.ideas, idea] })),
isEmpty: () => get().ideas.length === 0,
}))Set: function which manage mind
Get: function which return current mind
Then bind your components, and that's it!
Use the useRemind anywhere you want. This hook will decide when your component get rerendered.
Selector: causes the component to re-render only when the scope value changes
function IdeasDisplay() {
const { ideas } = useRemind((mind) => mind.ideas)
return (
<ul>
{ideas.map((idea) => (
<li>{idea}</li>
))}
</ul>
)
}
const ideas = [
/* ... */
]
function Controls() {
const { mind } = useRemind()
return (
<button
onClick={() => {
mind.sendAnIdea(random(ideas))
}}>
send an idea
</button>
)
}SetMind
Function which manage mind.
const { setMind } = remind(
{
/* */
},
(set) => ({
sendAndIdea: () => {
// emitter is provided here automatically by useRemind
set(patch, config)
},
})
)
// emitter is not provided here automatically
setMind(patch, config)Patch:
setMind((mind) => ({
/* */
}))
// or
setMind({
/* */
})Config:
// default setMind config
const config = {
emitt: true, // decides whether the listener sending the action will be called
replace: false, // decides whether mind will be overwrite
}Async
Remind will generate you status for each async action.
const { useRemind } = remind({ ideas: [] }, (set, get) => ({
sendAnIdea: async (id) => {
const idea = await myFetcher(id)
set((mind) => ({ ideas: [...mind.ideas, idea] }))
},
}))
const Component = () => {
const [mind] = useRemind()
const [sendAnIdea, status] = mind.sendAnIdea
/* return */
}Immer
Remind supports immer
const { useRemind } = remind({ ideas: [] }, (set, get) => ({
sendAnIdea: async (id) => {
const idea = await myFetcher(id)
set((mind) => {
mind.push(idea)
})
},
}))
const Component = () => {
const [mind] = useRemind()
const [sendAnIdea, status] = mind.sendAnIdea
/* return */
}Work beyond components
Sometimes you need to access mind outside components.
const { setMind, subscribe } = remind({ ideas: [] }, (set, get) => ({
sendAnIdea: async (id) => {
const idea = await myFetcher(id)
set((mind) => ({ ideas: [...mind.ideas, idea] }))
},
}))
// Listening to all changes, fires synchronously on every change
const subscriber = subscribe((mind, nextMind) => {
/* */
})
setMind(/* */)
// Actions for manage mind
subscriber.actions
// Unsubscirbe listener
subscriber.unsubscribe()
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)