react-water-tank v1.0.4
React Water Tank
This is a simple library to manage the global states like Redux/Flux
does. You can use it both in a React JS project or a React Native project!
No more redux or context API or Flux! This is also controlled using event-driven architecture, and you can connect your components using a hoc or a hook which has the direct communication with the store. This is very simple and there is no complexity to use it like redux/flux or react context. You can register your states as a state holder easily and manage them from their own methods (You will be given from the hooks or from the hoc props!)
Installation
npm install react-water-tank
Usage
Create Global States
Create a folder named
states
at the root of your project Inside thestates
directory you can put your global states like below
// AuthState.js
export const AuthState = {
is_logged_in: false,
user_id: '',
};
// TodoState.js
export const TodoState = {
data: [],
};
Register State Holders (Global States)
Put these line of codes into a top level component such as
index.js
orApp.js
If you do not register the state holders into a top level component, that would not be a problem, but you might not be able to access the later defined states into some components that are mounted before the state holder registration.
import {registerStateHolder} from "react-water-tank";
import {AuthState, TodoState} from './states';
registerStateHolder("auth", AuthState);
registerStateHolder("todo", TodoState);
Unregister State Holders (Global States)
You can unregister a state holder object by the following way.
import { unregisterStateHolder } from "react-water-tank";
unregisterStateHolder("todo");
Dispatching
You can call the following function to dispatch store changes manually
import { dispatch } from "react-water-tank";
dispatch();
Connect to store from a component
Both for functional or class component you can use a HOC which will pass a prop as the state holder name. See the below code carefully:
Class Component
import { connectWaterTankPipe } from "react-water-tank";
class Todos extends React.Component {
render() {
// Grab the state and it's change method
const {state, setState} = this.props.todo;
return (
<React.Fragment>
{/* Your JSX */}
</React.Fragment>
);
}
}
// Here you need to pass the state holder name
// For creating connection to the state directly
export default connectWaterTankPipe("todo")(Todos);
Functional Component
import { connectWaterTankPipe } from "react-water-tank";
import { Button } from "./components/Button";
function Login(props) {
const {state, setState} = props.auth;
const handleClick = () => setState({
is_logged_in: true,
});
return (
<React.Fragment>
<Button
onClick={handleClick}
title={"Login"}
/>
</React.Fragment>
);
}
// Here you need to pass the state holder name
// For creating connection to the state directly
export default connectWaterTankPipe("auth")(Login);
Hooks Support
You can also use hooks to make the easier connection with a state holder Follow the below code (The usage of hooks)
import { useWaterTankPipe } from "react-water-tank";
import { Button } from "./components/Button";
function Login(props) {
const [state, setState] = useWaterTankPipe("auth");
const handleClick = () => setState({
is_logged_in: true,
});
return (
<React.Fragment>
<Button
onClick={handleClick}
title={"Login"}
/>
</React.Fragment>
);
}
export default Login;
Update multiple state holder object
import { setStateHolderState } from "react-water-tank";
import { Button } from "./components/Button";
function Home(props) {
const logout = () => setStateHolderState("auth", {
is_logged_in: false,
});
const clearTodos = () => setStateHolderState("todo", {
data: [],
});
return (
<React.Fragment>
<Button
onClick={logout}
title={"Logout"}
/>
<Button
onClick={clearTodos}
title={"Clear Todos"}
/>
</React.Fragment>
);
}
export default Home;
Developer
Mohammed Nayeem GitHub: http://github.com/chiefnayeem