In software development, a view model is an architectural pattern that separates the presentation layer (UI) from the business logic layer.
npm i @xeinebiu/react-mvvm@2.0.7
To create a new view model, extend the ViewModel
class provided by this library:
import { createViewModel } from '@xeinebiu/react-mvvm';
const counterViewModel = createViewModel({ counter: 0 }, viewModel => ({
increment: () =>
viewModel.setState({ counter: viewModel.getState().counter + 1 }),
decrement: () =>
viewModel.setState({ counter: viewModel.getState().counter - 1 }),
}));
The useSelector
hook allows you to subscribe to changes in the view model state and efficiently update your components:
import { useSelector } from '@xeinebiu/react-mvvm';
function CounterComponent() {
const count = useSelector(counterViewModel, vm => vm.getState().count);
return (
<div>
<p>Count: {count}</p>
<button onClick={counterViewModel.increment}>Increment</button>
<button onClick={counterViewModel.decrement}>Decrement</button>
</div>
);
}
In this example, the CounterComponent
will automatically re-render whenever the count
state in the CounterViewModel
changes.
Method | Description |
---|---|
constructor(initialState: T) |
Creates a new instance of ViewModel with the provided initial state. |
getState(): T |
Returns the current state of the ViewModel. |
setState(newState: Partial<T>): void |
Updates the state of the ViewModel with the provided partial state object. |
subscribe(listener: Listener<T>): () => void |
Subscribes a listener function to be called whenever the state of the ViewModel changes. Returns an unsubscribe function. |
dispose(): void |
Clears all listeners and disposes of the ViewModel. |
A hook that subscribes to changes in the ViewModel's state and efficiently updates the component when the selected state changes.
This library is licensed under the MIT License.