https://github.com/puema/react-station
🚉 Easy to use state and actions for React. Optimized rerenders with state selection. Typesafe. Async actions. https://puema.github.io/react-station/
https://github.com/puema/react-station
actions react-station redux state-management typesafe
Last synced: over 1 year ago
JSON representation
🚉 Easy to use state and actions for React. Optimized rerenders with state selection. Typesafe. Async actions. https://puema.github.io/react-station/
- Host: GitHub
- URL: https://github.com/puema/react-station
- Owner: puema
- Created: 2020-01-26T20:27:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:47:01.000Z (over 3 years ago)
- Last Synced: 2025-03-12T15:39:11.549Z (over 1 year ago)
- Topics: actions, react-station, redux, state-management, typesafe
- Language: TypeScript
- Homepage:
- Size: 1.99 MB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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](https://github.com/reduxjs/react-redux) was always too verbose for my personal taste. React [Contex](https://reactjs.org/docs/context.html) is great, but there is no optimized state subscribtion. I do like the approach of [unistore](https://reactjs.org/docs/context.html) 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
```jsx
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 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'.
};
```