context-base-api
This is library help u with solve problem with rerenders and simplify DI to your pages.
Basic Usage
take the next.js page as an example
import { withContexts } from "context-base-api";
export default withContexts(TodoPage, [GlobalStore])and also use our store in the component we need
import { FC, PropsWithChildren } from "react";
import { connectContext } from "context-base-api";
export const TodoList = connectContext(
[GlobalStore],
([{ notifications, todos }]) => ({ todos })
)(({ todos }) => {
return (
<div>
{todos.map(({ name }) => (
<div>{name}</div>
))}
</div>
);
});Stores
Create simple store
export const MessagesStore = createStore(() => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState<string[]>();
const loadingItems = () => {
setLoading(true);
(() => {
setData([]);
})();
setLoading(false);
};
return {
state: { messages: { isLoading: loading, items: data } },
actions: { loadingItems },
};
});Create store with dependencies another store
export const MessagesStore = createStore(({notifications}) => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState < string[] > ();
const loadingItems = () => {
setLoading(true);
(() => {
setData([]);
})();
setLoading(false);
};
return {
state: {messages: {isLoading: loading, items: data}},
actions: {loadingItems},
};
}, [GlobalStore.Context],
({state: {notifications}}) => ({ notifications})
);Contribution
In the near future I would like to add several Contexts for use in connectContext. If you have time you can help me with this