https://github.com/bangle-io/nalanda
A state management library
https://github.com/bangle-io/nalanda
javascript react react-state-management state state-management state-manager typescript
Last synced: about 1 year ago
JSON representation
A state management library
- Host: GitHub
- URL: https://github.com/bangle-io/nalanda
- Owner: bangle-io
- Created: 2023-01-29T23:23:26.000Z (over 3 years ago)
- Default Branch: dev
- Last Pushed: 2023-11-18T21:15:35.000Z (over 2 years ago)
- Last Synced: 2025-03-27T08:45:13.530Z (about 1 year ago)
- Topics: javascript, react, react-state-management, state, state-management, state-manager, typescript
- Language: TypeScript
- Homepage: https://nalanda.bangle.io
- Size: 1.67 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Nalanda
Effortlessly Powerful State Management Simple to Start, Designed to Scale.
## Features
- **Predictable State Management:** No magic, predictable state management that scales with your app.
- **Performance Optimized:** With explicit dependency management, slices of state only update when necessary, ensuring optimal performance.
- **TypeScript First:** Leverages TypeScript to catch errors at compile-time.
- **Powerful Effects System:** Handle complex logic outside of your UI components.
- **Scalability:** Allows you to break your app into small, testable, and maintainable slices.
- **Framework Agnostic:** Works seamlessly with any framework.
### Installation
```sh
npm i @nalanda/core
# for react
npm i @nalanda/react
```
## Quick Start
### Creating a Slice
Lets start by creating a simple counter slice.
```tsx filename="counter-slice.ts"
import { createKey } from '@nalanda/core';
// The key is a local helper used to define various components of your slice.
const key = createKey('counterSlice', []);
// State fields define part of your state.
const counter = key.field(0);
// Actions define how a field/s should be updated.
function increment() {
return counter.update((c) => c + 1);
}
// A slice serves as an interface, revealing the specified fields
// and actions to the entire application.
export const counterSlice = key.slice({
counter,
increment,
});
```
### Setting up the Store
At the root of your React app, set up a store and encapsulate your app with the StoreProvider component:
```tsx copy filename="app.tsx"
import { StoreProvider } from '@nalanda/react';
import { createStore } from '@nalanda/core';
import { counterSlice } from './counter-slice';
// Establish a global store incorporating your slices.
const store = createStore({
slices: [counterSlice],
});
ReactDOM.render(
// use the StoreProvider to make the store available to the entire app.
,
document.getElementById('root'),
);
```
### Displaying the counter
With the store in place, employ the useSlice hook to access the state and actions from the slice:
```tsx copy filename="counter.tsx"
import { useTrack, useStore } from '@nalanda/react';
import { counterSlice } from './counter-slice';
export function Counter() {
// useTrack re-render the component whenever `counter` changes
const { counter } = useTrack(counterSlice);
const store = useStore();
const increment = () => {
// Dispatch an action to update the slice
store.dispatch(counterSlice.increment());
};
return (
Counter
{counter}
increment
);
}
```
### Next Steps
- Dive deeper into Nalanda by exploring our [official documentation](https://nalanda.bangle.io).
- View [real-world examples](https://nalanda.bangle.io/docs/examples) to see Nalanda in action.
### Contribute to Nalanda
Your contribution can make `nalanda` even better! If you're interested in lending a hand, please consult our [CONTRIBUTING.md](CONTRIBUTING.md) guide.