react-flow-store
v1.0.0
Published
A simple, efficient, and flow-based state management library for React applications.
Downloads
7
Readme
ReactFlowStore
A lightweight state management library for React applications. Dive into a reactivity-rich environment powered by RxJS and experience a simpler, straightforward state management approach.
Features
- Minimalist API
- Reactive updates with RxJS
- Convenient hooks for easy React integration
- Middleware and action creator support
- Memoization and caching for efficient data retrieval
Installation
Install ReactFlowStore via npm:
npm install react-flow-store
Usage
Create a store:
// store.ts
import { createStore } from "react-flow-store";
const store = createStore({
state: {
users: [],
},
actions: {
getUsers({ state }) {
fetch("some-url")
.then((res) => res.json())
.then((users) => {
state.users = users;
});
},
},
getters: {
users({ state }) {
return state.users;
},
},
});
export default store;
Use the store in a React component:
// UserComponent.tsx
import React from "react";
import { useStore } from "react-flow-store";
import store from "./store.ts";
const UserComponent: React.FC = () => {
const users = useStore(store, "users");
return (
<div>
{users.map((user) => (
<div key={user.id}>{user.name}</div>
))}
</div>
);
};
Wrap your app with StoreProvider:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import store from "./store";
import { ReactFlowStoreProvider } from "react-flow-store";
ReactDOM.render(
<ReactFlowStoreProvider store={store}>
<App />
</ReactFlowStoreProvider>,
document.getElementById("root")
);
Documentation
For more detailed documentation and additional examples, please refer to the official documentation (Link when available).
Contributing
Pull requests are welcome. For significant changes, please open an issue first to discuss your proposals. Remember to run tests before submitting your PR!
License
MIT