outer-state

Write simpler cleaner code faster.

outer-state is a simple yet powerful state management library for ReactJS applications.

• It is 100% boilerplate free. There is zero setup or configuration. The learning curve is tiny. It just works.

• It promotes and facilitates moving all business logic out of React and into vanilla Typescript/Javascript files.

• This massively reduces application complexity.

• It also massively reduces unit test complexity while promoting increased test quality and coverage.

• outer-state is enjoyable to use.

Installation

yarn add outer-state

or

npm install outer-state

Basic Usage

interface TaskTrackerState {
  secondsElapsed: number;
  itemsComplete: string[];
}

Create a store (multiple stores are strongly encouraged)

@import { createStore } from 'outer-state';

const taskTrackerState = createStore<TaskTrackerState>({
  secondsElapsed: 0,
  itemsComplete: []
});

Update State

Updating state can be done inside vanilla TypeScript files. This is encouraged.

Functional Variant

taskTrackerState.updateStore((store) => ({secondsElapsed: store.secondsElapsed + 1}));

Object Variant

taskTrackerState.updateStore({secondsElapsed: 23));

Read State (outside of a Component or custom-hook)

const {secondsElapsed, itemsComplete} = taskTrackerState.data();

Read State (inside a Component or custom-hook)

Using useStore() will cause a rerender when any of the values change

const {secondsElapsed, itemsComplete} = taskTrackerState.useStore();

return (
  <div>
    <div>Seconds Elapsed: {secondsElapsed}</div>
    <div>
      <h2>itemsComplete</h2>
      <ul>
        {itemsComplete.map((item) => <li key={item}>{item}</li>)}
      </ul>
    </div>
  </div>
)

Examples and Demos

• StackBlitz Collection
• Minimal Example
• Complete Example
• NextJS Example

To run the example in this repo simply navigate to /example and run yarn install followed by yarn start. The example will then be available at http://localhost:1234.