Next generation global state management for React, without the bloat.
Freedux gives you a single, immutable, strongly typed object tree that can be used to store and manage the state of your application. This is a similar concept to redux, but unlike redux, the Api is super simple and requires hardly any set up to start using.
- Lightweight - 5k zipped
- 0 dependencies
- Modern hooks based API
- Render optimization
- APIs for usage outside of React
- State data stored as plain JS primitives and objects
- Strongly typed
This project uses a fork from the ts-object-path library.
npm install freeduximport { createStore } from 'freedux';
// Define your initial state
const initialState = {
count: 0
};
// Create your store to retrieve some hooks
const { useListener, useSetter } = createStore(initialState);Use the useListener hook to select and inject state into your component:
const CountDisplay = () => {
const count = useListener(state => state.count);
return <>{count}</>;
};Use the useSetter hook to update your store. You pass a function that returns
the property you want to update. The hook returns a setter function to do that
work:
const CountButton = () => {
const setCount = useSetter(state => state.count);
return (
<button
onClick={() => {
setCount(5);
}}
>
Set the counter to 5
</button>
);
};Those are the basics. Check out the example and API docs, and happy coding!