Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
synaptik
Advanced tools
Changelog
Readme
The state management library you've been waiting for
Redux is a great tool and undoubtedly helped push the web forward by providing a strong mental model around global state. Redux, however, does come with its flaws:
Some other state management solutions in the wild have attempted to solve these issues. Two to note, and mainly where inspiration for Synaptik was drawn, are Unstated and Statty. Both use a basic component with render props to access global state ❤️ - but each had shortcomings.
Unstated's Container
works well to control business logic and encapsulate several pieces of state, all while feeling very familiar to Component local state. Containers, otherwise known as Stores in synaptik, live on, only accessed differently on render.
Statty's approach is great - by using a select
prop to pluck only the pieces of state you want, it's easy to inject derived state as a render prop, while also making it easy to check for referential equality to prevent unecessary renders. Statty was only missing a dedicated logic unit.
Thus, Synaptik was born - marrying the concepts of Unstated and Statty in what looks to be a happy union. Hope y'all like it! 😎
Begin by creating your first store, which extends from Store
.
import { Store } from 'synaptik';
import { Stores } from 'app/lib/synaptik';
interface TodoState {
input: string;
entries: string[];
}
export default class TodoStore extends Store<TodoState, Stores> {
state = {
input: '',
entries: [],
};
updateInput = (input: string) => {
this.setState({ input });
};
addTodo = (todo: string) => {
// setState acts like React component's setState,
// except that it runs synchronously
this.setState({
entries: [...this.state.entries, todo],
});
};
}
Next, create a file that will export your store Provider
and useSynapse
hook:
// app/lib/synaptik.ts
import { createSynaptik } from 'synaptik';
import * as stores from './stores';
const { Provider, useSynapse } = createSynaptik(stores);
export type Stores = typeof stores;
export { Provider, useSynapse };
Lastly, wrap your application with the Provider
.
import { render } from 'react-dom';
import { Provider } from 'app/lib/synaptik';
/*
`stores` look something like the following. The keys are used as
identifier's when accessing the store during render.
{
todos: TodoStore,
...etc
}
*/
const App = () => (
<Provider>
<Entry />
</Provider>
);
render(<App />, window.root);
Now, you can access your stores and state with the useSynapse
hook:
NOTE: if your selector functions returns non-primitive values in an array, you must mark the array
as const
for Typescript to properly infer the signatures of the destructured elements
import { useSynapse } from 'app/lib/synaptik';
function TodoList() {
const [todos, input, updateInput, addTodo] = useSynapse(({ todos }) => [
todos.state.entries,
todos.state.input,
todos.updateInput,
todos.addTodo
]);
return (
<>
<ul>
{todos.map(todo => (
<li>{todo}</li>
))}
</ul>
<form onSubmit={addTodo}>
<input value={input} onChange={updateInput} />
<button type="submit">Submit</button>
</form>
</>
);
}
🚀 You've done it! You have your first todo app up and running 4 simple steps.
FAQs
Yet another state management library
The npm package synaptik receives a total of 1,386 weekly downloads. As such, synaptik popularity was classified as popular.
We found that synaptik demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.