nalanda v0.2.3
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
npm i @nalanda/core
# for react
npm i @nalanda/react
Quick Start
Creating a Slice
Lets start by creating a simple counter slice.
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:
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.
<StoreProvider store={store}>
<App />
</StoreProvider>,
document.getElementById('root'),
);
Displaying the counter
With the store in place, employ the useSlice hook to access the state and actions from the slice:
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 (
<div>
<h1>Counter</h1>
<p>{counter}</p>
<button onClick={increment}>increment</button>
</div>
);
}
Next Steps
- Dive deeper into Nalanda by exploring our official documentation.
- View real-world 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 guide.
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
6 months ago
6 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago