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

constinitialState={count: 0,};typeState=typeofinitialState;constactions={// The Current state is passed as first parameter to the actionsincrement({ count }: State){// The return value should be a Partial<State> and will be mergedreturn{count: count+1};},// Payload is available as following parametersadd({ count }: State,value: number){return{count: count+value,};},// Actions can also be asyncasynccalculateSum({ count }: State,value: number){constresult=awaitasyncCalculation(count,value);// Make sure to access state after async calls via// store.getState() to avoid race conditionsreturn{count: result,};},};// Multiple instances of different stores can be createdconststore=createStore(initialState,actions);exportconstComponent=()=>{// Simply retrieve state and actions via hooksconst{ state, actions }=useStore(store);// Or select a part of the state to avoid unnecessary rerendersconst{state: state2}=useStore(store,s=>s.count);const{ add }=actions;add(1);// okadd('1');// Error: '1' is not assignable to parameter of type 'number'.};