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'.
};