A state management library for React.

If you need a simple way to manage your application's state without needing to rewrite a lot of code, maybe you like Luffie.

You can keep your state centralized at our Store and create functions that alter the Store State. Everytime the state gets updated, all components plugged into it are rendered automatically.

In Luffie, you need two steps to do that:

How to install

npm install --save luffie

or

yarn add luffie

How to use

import { createStore, plug } from "luffie"

---

The store is a place where you keep the data that you need to access across you application. Usually you will have a Store for each Page or Shared Resource that you need to keep in your application's memory.

1. Initialize your Store

const initialState = {
  total: 0,
  changed: false,
}

const { updateState, getCurrentState, state$ } = createStore(initialState);

2. Export your State Stream

const yourState$ = state$;

export { yourState$ }

3. Create actions that change your store

const changeTotal = (quantity: number) => {
  updateState({
    total: quantity,
    changed: true,
  });
}

When you call updateState, your new data will be merged with the current data stored and a new state will be forwarded for all Components/Subscribers of you Store.

---

The other side of the coin is the UsePlug Hook. This way you can Plug your component into your newly created Store and at each change, the store data update your component's state.

const TestComponent = ({ name }) => {
  const { total, changed } = useStream(yourState$);
  return (
    <div>
      <h1 data-testid="name">{name}</h1>
      <p data-testid="total">Total: {total}</p>
      <p data-testid="changed">The store was{changed ? '' : `n't`} changed.</p>
      <button onClick={() => changeTotal(total + 1)}>Add more 1 to Total</button>
    </div>
  );
};

---

Use Luffie like this if your React doesn't support Hooks If you use a older version of React without Hooks, you can use the Plug HOC to connect your component with you store state following the steps described below:

1. Create your Container

const TestComponent = ({ name, total, changed }) => {
  return (
    <div>
      <h1 data-testid="name">{name}</h1>
      <p data-testid="total">Total: {total}</p>
      <p data-testid="changed">The store was{changed ? '' : `n't`} changed.</p>
      <button onClick={() => changeTotal(total + 1)}>Add more 1 to Total</button>
    </div>
  )
}

2. Create your StreamToProp constant.

This stream receives your parent's component Prop, and this way you can merge it with your Store's State.

const streamToProp = (props) => {
  return of(props).pipe(
    combineLatest(yourState$),
    map(([{ name }, state]) => {
      const data = {
        name,
        ...state
      }
      return data;
    })
  );
};

3. Plug!

const PluggedTestComponent = plug(streamToProp)(TestComponent);

---

Future Plans

• Make RxJs optional
• Use React Hooks instead of a PureComponent inside Plug's HOC