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

1import { withContexts } from "context-base-api";
2
3export default withContexts(TodoPage, [GlobalStore])

and also use our store in the component we need

1
2import { FC, PropsWithChildren } from "react";
3import { connectContext } from "context-base-api";
4
5export const TodoList = connectContext(
6    [GlobalStore],
7    ([{ notifications, todos }]) => ({ todos })
8)(({ todos }) => {
9    return (
10        <div>
11            {todos.map(({ name }) => (
12                <div>{name}</div>
13            ))}
14        </div>
15    );
16});

Stores

Create simple store

1export const MessagesStore = createStore(() => {
2    const [loading, setLoading] = useState(false);
3    const [data, setData] = useState<string[]>();
4
5    const loadingItems = () => {
6        setLoading(true);
7        (() => {
8            setData([]);
9        })();
10        setLoading(false);
11    };
12
13    return {
14        state: { messages: { isLoading: loading, items: data } },
15        actions: { loadingItems },
16    };
17});
18

Create store with dependencies another store

1export const MessagesStore = createStore(({notifications}) => {
2    const [loading, setLoading] = useState(false);
3    const [data, setData] = useState < string[] > ();
4
5    const loadingItems = () => {
6        setLoading(true);
7        (() => {
8            setData([]);
9        })();
10        setLoading(false);
11    };
12
13    return {
14        state: {messages: {isLoading: loading, items: data}},
15        actions: {loadingItems},
16    };
17}, [GlobalStore.Context], 
18    ({state: {notifications}}) => ({ notifications})
19);
20

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

Donation

Donation Alerts