state-context

state-context

Simple state-management with React Context API

Install

npm install state-context

Idea

state-context does state management for React. In terms of complexity it is located between using local state and Redux.

1. With state-context it's very easy to migrate your component from local state to global state:

import * as React from 'react';


const MyBirthday: React.SFC = () => {

  const [age, setAge] = React.useState(20);

  return (
    <button onClick={() => setAge(age + 1)}>
      Celebrate {age} birthday!
    </button>
  );
};

import * as React from 'react';
import { MyStore } from './my-store';

const MyBirthday: React.SFC = () => {
  const context = React.useContext(MyStore);
  const [age, setAge] = context.useState.age;

  return (
    <button onClick={() => setAge(age + 1)}>
      Celebrate {age} birthday!
    </button>
  );
};

1. It's useful for cases where Redux boilerplate would be an overhead (it still makes sense and is easy to decouple state management from UI layer).

1. You can set up one global store or multiple shared-state containers.
2. It's still deterministic as you can attach middleware and watch/undo/redo.
3. You have TypeScript support out of the box.