- Simple utilities to use state management based on RxJS.
- It allows writing more declarative code, separating side-effects from pure functions.
- This allows framework independent state management, by separating State and App Logic from view-layer, so it can be easy to migrate Frontend frameworks/libraries.
- Components will emit events and will subscribe(or listen) to state changes.
- Components can also subscribe to Features (explained below). Features will take events Observable as inputs and will have logic for updating state.
- This library is having peer dependencies, rxjs and react, make sure you have them in your project.
npm i @rx-state-utils/react
We can convert Component events to Observables so that we can use RxJS operators on them. That will make code more declarative. To convert Events to Observables useEvent
hook is provided.
Consider below Example component
import { useEvent } from '@rx-state-utils/react'
function Example() {
const [text$, textChangeHandler] = useEvent((ev) => ev.target.value)
return <input type="text" onInput={textChangeHandler} value={text} />
}
useEvent
returns 2 values, first is the Observable value and second is the handler which you can attach to your element. It also accepts an optional callback, which you can use to map incoming event to some value.
In example above,
- Event handler
textChangeHandler
is attached to input of type text. - Event is mapped to target's text value.
-
text$
is Observable
TypeScript example looks like below
import { useEvent } from '@rx-state-utils/react'
function Example() {
const [text$, textChangeHandler] = useEvent<React.FormEvent<HTMLInputElement>, string>(
(ev) => (ev.target as HTMLInputElement)['value']
)
return <input type="text" onInput={textChangeHandler} value={text} />
}
- To create state use
createState
. This should be in separate file than component to separate state from view. Here, I will name the filefacade.ts
// facade.ts
import { createState } from '@rx-state-utils/react'
const state = createState({
todos: [],
text: '',
})
In TypeScript,
import { createState } from '@rx-state-utils/react'
// facade.ts
const state = createState<State>({
todos: [] as Todo[],
text: '',
})
export { state }
You can export this state and component can subscribe to this state and update its internal state using it.
import { useSubscribe } from '@rx-state-utils/react'
import { state } from './facade'
import { useState } from 'react'
const [todos, setTodos] = useState([])
const [text, setText] = useState('')
// Update Framework state, so it can update its view
useSubscribe(state.asObservable(), (state) => {
setTodos(state.todos)
setText(state.text)
})
Above example,
- is using
useSubscribe
to subscribe tostate.asObservable()
.useSubscribe
automatically unsubscribes on component destroy to prevent memory leaks.
Note: We need to update React's state so it knows when to update its view. Ideally a component should only set React's state once in this way. We will update the state created with
createState
only(not the React's state) and those will get applied to React's state with this subscription.
You can do the following with the State created with createState
-
Update
state.update({ text: 'new text' })
- This will immutably update the text property of the state.
- To use current state while updating current state you can do the following.
state.update((currentState) => ({ todos: [...currentState.todos, todo], // add a todo in current todos text: '', }))
-
Get Current State
const currentState = state.get()
-
State as observable, to which component can subscribe to
const state$ = state.asObservable()
- You can define features in facade.ts file like below, and the component can subscribe to the features.
// facade.ts
const Features = {
addTodo(add$: Observable<void>) {
return add$.pipe(
map(() => todoCreator.createTodo({ text: state.get().text })),
tap((todo) => {
state.update((currentState) => ({
todos: [...currentState.todos, todo],
text: '',
}))
})
)
},
setText(text$: Observable<string>) {
return text$.pipe(
tap((text) => {
state.update({ text })
})
)
},
}
export { Features }
// Example.tsx
import { useJustSubscribe } from '@rx-state-utils/react'
function Example() {
useJustSubscribe(Features.setText(text$), Features.addTodo(add$))
}
-
useJustSubscribe
hook is used to just subscribe and don't do anything else. LikeuseSubscribe
, it will also auto-unsubscribe on component destroy. - Using this way we have side-effects separated in
tap
operators. - The state and its update logic in
facade.ts
file are separated from component/view-layerExample.tsx
file. - Now, in future, if we want to migrate to other view-layer or Frontend-framework, we just need to update component file and subscribe to state and features and emit Observable Events, the
facade.ts
file can remain the same.