react-immersive
v0.6.3
Published
Simple state management for react on top of immer
Downloads
45
Readme
react-immersive
Simple state management for react on top of immer
- Define the state.
- Define actions that will modify the state (it uses immer, so mutate it all you want).
- Use the hooks to access the state and actions.
- Use local updates to prioritize user input response.
Installation
Install via yarn:
yarn add immer react-immersive
Or npm:
npm install --save immer react-immersive
Usage
Pass your initial state as the first argument, followed by an actions creator on the second argument.
An actions creator accepts a modifier function that lets you modify the state (I prefer to call it draftState
) directly inside each of actions that you create.
Please head to immer's documentation if you haven't heard of it.
Initialization
todo.js
import { createContext } from "react-immersive";
const todo = createContext(
{ tasks: [{ task: "hello", done: false }] },
(modify) => ({
addTask: (task) => {
modify((draft) => {
draft.tasks.push({ done: false, task });
});
},
removeTask: (index) => {
modify((draft) => {
draft.tasks.splice(index, 1);
});
},
})
);
export default todo;
main.jsx
ReactDOM.render(
<todo.Provider>
<YourApp />
</todo.Provider>
);
Accessing actions
import todo from "./todo";
const SomeComponent = () => {
const actions = todo.useActions();
const handleAddNewTask = () => {
actions.addTask("Test");
};
const handleRemoveTask = () => {
actions.removeTask(0);
};
return <div></div>;
};
Accessing state
useSelectState
accepts a function that selects the state target, allowing your component to focus only on what matters.
import todo from "./todo";
const OtherComponent = () => {
const firstTask = todo.useSelectState((state) => state.tasks[0]);
return <div></div>;
};
Using local updates
This is an experimental feature that lets you prioritize the rendering of the closest component to the user input in order to improve the user-perceived performance of your large application. This feature relies on the presence of window.requestIdleCallback, therefore you need to add the polyfill at the beginning of your application entrypoint.
import todo from "./todo";
const SomeComponent = () => {
const localUpdates = todo.useLocalUpdates();
const actions = localUpdates.useActions();
const handleAddNewTask = () => {
actions.addTask("Test");
};
const handleRemoveTask = () => {
actions.removeTask(0);
};
const firstTask = localUpdates.useSelectState((state) => state.tasks[0]);
return <div></div>;
};
In this example, SomeComponent
will maintain a copy of the global state in localUpdates
. Each changes that happen to localUpdates
will be emitted to the global state after the SomeComponent
completes re-rendering.