fragmented-store v0.3.0

Getting started:

Install it with Yarn:

yarn add fragmented-store

Or install it with Npm:

npm install fragmented-store --save

Usage:

Provider

The Provider is required for any of its child components to consume fragmented-store hooks.

import createStore from "fragmented-store";

const { Provider } = createStore({
  username: "Aral",
  age: 31
});

function App() {
  return (
    <Provider>
     {/* rest */} 
    </Provider>
  );
}

Fragmented store

The power of this library is that you can use fragmented parts of the store, so if a component uses only one field of the store, it will only re-render again if there is a change in this particular field and it will not render again if the other fields change.

For each of the fields of the store, there is a hook with its name, examples:

• username 👉 useUsername
• age 👉 useAge
• anotherExample 👉 useAnotherExample

import createStore from "fragmented-store";

const { useUsername } = createStore({
  username: "Aral",
  age: 31
});

function FragmentedExample() {
  const [username, setUsername] = useUsername();

  return (
    <button onClick={() => setUsername("AnotherUserName")}>
      Update {username}
    </button>
  );
}

Unfragmented store

The advantage of this library is to use the store in a fragmented way. Even so, there are cases when we want to reset the whole store or do more complex things. For these cases, we can use the hook useStore.

import createStore from "fragmented-store";

const { useStore } = createStore({
  username: "Aral",
  age: 31
});

function UnfragmentedExample() {
  const [store, update] = useStore();

  return (
    <>
      <h1>{state.username}, {state.age}</h1>
      <button onClick={() => update({ age: 31, username: "Aral" })}>Reset</button>
    </>
  );
}

Example

• https://codesandbox.io/s/fragmented-store-example-4p5dv?file=/src/App.js

import createStore from "fragmented-store";

const { Provider, useUsername, useAge, useStore } = createStore({
  username: "Aral",
  age: 31
});

export default function App() {
  return (
    <Provider>
      <Title />
      <UpdateTitle />
      <Age />
      <AllStore />
    </Provider>
  );
}

function Title() {
  const [username] = useUsername();

  console.log("render Title");

  return <h1>{username}</h1>;
}

function UpdateTitle() {
  const [username, setUsername] = useUsername();

  console.log("render UpdateTitle");

  return (
    <button onClick={() => setUsername((s) => s + "a")}>
      Update {username}
    </button>
  );
}

function Age() {
  const [age, setAge] = useAge();

  console.log("render age");

  return (
    <div>
      <div>{age}</div>
      <button onClick={() => setAge((s) => s + 1)}>Inc age</button>
    </div>
  );
}

function AllStore() {
  const [store, update] = useStore();

  console.log({ store }); // all store

  return (
    <button onClick={() => update({ age: 31, username: "Aral" })}>Reset</button>
  );
}