reastore
v0.9.6
Published
Dead simple state management for React
Downloads
33
Readme
ReaStore
This is a proof of concept for an extremely simple and powerful state management library for React. It is inspired by state management mechanism of React components.
How it works
The library consists of three constructs:
Store
:Store
is a base class that supposed to handle the state management code. The api is almost like React components' state management (asetState
method and astate
property that holds the state). You can subclass stores fromStore
, define methods which change the state and assume that your components will react based on changes on state.
export class GithubReposStore extends Store<GithubReposState> {
constructor() {
super();
this.state = {
username: "alisabzevari",
repos: [],
isLoading: false
};
this.fetchRepos = this.fetchRepos.bind(this);
}
fetchRepos(username) {
this.setState({ isLoading: true, username });
fetch(`https://api.github.com/users/${username}/repos`)
.then(response => response.json())
.then(result => {
this.setState({ repos: result, isLoading: false });
});
}
}
connect
: It is likeconnect
function in Redux. It creates smart components from dump ones. Simply write amapStoresToProps
function accepting stores and returning props of the component:
import { connect } from "reastore";
class GithubRepos extends React.Component {
...
}
const mapStoresToProps = ({ githubReposStore, sessionStore }) => (
{
username: githubReposStore.state.username,
isLoading: githubReposStore.state.isLoading,
repos: githubReposStore.state.repos,
fetchRepos: githubReposStore.fetchRepos,
changeCurrentUser: sessionStore.changeCurrentUser
}
);
export default connect(mapStoresToProps, GithubRepos);
Provider
: Which is a very simple dependency container. Just Use this component on your application level and assign all stores to itsvalue
property.
import { Provider } from "reastore";
import { allStores } from "./stores";
const App = () => (
<Provider value={allStores}>
<GithubRepos />
</Provider>
);
You can look at the example directory for a complete working example.