A tiny (696B) immutable state management library based on Immer

Quick Start

yarn add mutik

or

Table of Contents

• Example
• API
  • createStore<State>(intialState: State): [Store<State>, useStore<Value>(selector: (state: State) => Value): Value]
    • store
    • useStore<Value>(selector: (state: State) => Value): Value
• Author
• Inspiration

Example

import React from 'react';
import { render } from 'react-dom';
import { createStore, Provider, useSelector } from 'mutik';

// Create a lil' store with some state
let [store, useStore] = createStore({
  count: 0,
});

// The app doesn't need a provider
function App() {
  return (
    <div>
      <Label />
      <Buttons />
    </div>
  );
}

// You can mutate the store from anywhere you want to,
// even outside of React code. Mutate is based on immer.
function increment() {
  store.mutate(state => {
    state.count++;
  });
}

// Or you can update it like React.useState's update
function decrement() {
  store.set(prevState => ({
    ...prevState,
    count: prevState.count - 1
  });
}

// You don't need to pass the store down as a prop either
function Buttons() {
  return (
    <React.Fragment>
      <button onClick={decrement}>-</button>
      <button onClick={increment}>+</button>
    </React.Fragment>
  );
}

// Lastly, you can subcribe to "slices" of state by passing a selector to use
// state. The component will only be re-rendered when that portion of state
// re-renders.
function Label() {
  const count = useStore(state => state.count);
  return <p>The count is {count}</p>;
}

render(<App />, window.root);

API

createStore<State>(intialState: State): [Store<State>, useStore<Value>(selector: (state: State) => Value): Value]

Create a Mutik store given some initial state. The store has the following API you can use in or out of React.

store

| Method | Description | | ----------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | | get() | Get the current state. Do not use this inside of React, you should instead use useSelector | | set(nextState: S \| (prevState: S) => V): void; | Set state. This can either take a new value or and updater function (just like React.useState's updater) | | on(listener: Function): () => void; | Subscribe to store. Pass in a callback function that will be executed on updates. on() returns the unsubscribe function for your convenience. | | off(listener: Function): void; | Unsubscribe a given listener function | | reset(): void | Set state back to the initialState used when creating the store | | mutate(updater: (draft: Draft) => void \| S): void; | Immer-style updater function. |

useStore<Value>(selector: (state: State) => Value): Value

React hook to subscribe to Mutik state.

const selector = state => state.count;

function Label() {
  const count = useSelector(selector);
  return <p>The count is {count}</p>;
}

You can use props with Mutik selector.

function User({ id }) {
  const user = useSelector(state => state.users[id]);
  return <p>The username is {user.name}</p>;
}

Author

• Jared Palmer @jaredpalmer

Inspiration

• bey
• react-copy-write
• Brian Vaughn's fake redux

MIT License