react-station

React Station - State & Action

Easy to Use • Hooks • State Selection • Optimized Rerenders • Typesafe • Async Support
Demo

Why

Easy to use
Small footprint
Performance optimized
Typesafe with TypeScript

Redux was always too verbose for my personal taste. React Contex is great, but there is no optimized state subscribtion. I do like the approach of unistore with the bound actions a lot. However I prefer Hooks over the connect() API and I wanted the actions to be part of the store. So I created react-station, a simple state management with a lot of parallels to unistore and useSelect() from redux.

Usage

const initialState = {
  count: 0,
};

type State = typeof initialState;

const actions = {
  // The Current state is passed as first parameter to the actions
  increment({ count }: State) {
    // The return value should be a Partial<State> and will be merged
    return { count: count + 1 };
  },

  // Payload is available as following parameters
  add({ count }: State, value: number) {
    return {
      count: count + value,
    };
  },

  // Actions can also be async
  async calculateSum({ count }: State, value: number) {
    const result = await asyncCalculation(count, value);
    // Make sure to access state after async calls via
    // store.getState() to avoid race conditions
    return {
      count: result,
    };
  },
};

// Multiple instances of different stores can be created
const store = createStore(initialState, actions);

export const Component = () => {
  // Simply retrieve state and actions via hooks
  const { state, actions } = useStore(store);
  // Or select a part of the state to avoid unnecessary rerenders
  const { state: state2 } = useStore(store, s => s.count);

  const { add } = actions;

  add(1); // ok
  add('1'); // Error: '1' is not assignable to parameter of type 'number'.
};