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!)

Documentation

Installation

npm install react-water-tank

Usage

Create Global States

Create a folder named states at the root of your project Inside the states 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 or App.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