React Redux Human Hooks

React hooks for redux that humans can understand. Integrate redux into your React app one npm install away.

Introduction

The main goal of react-redux-human-hooks is that you can integrate Redux into your app in a simple and fast way, while maintaining performance.

Install

npm:

npm i react-redux-human-hooks

yarn:

yarn add react-redux-human-hooks

Usage

1. Create your actions

1import {createAction,createActions} from  'react-redux-human-hooks';
2
3//Define action types here
4export  const { setAnimal, otherAction}
5=  createActions('SET_ANIMAL','OTHER_ACTION')
6
7//You can specify them one by one
8export  const  setDog  =  createAction('SET_DOG');
9  
10//Or you can write your own actions creators
11export  const  setSquanch  =  createAction('SET_SQUANCH',payload=>{
12	//do something
13	return  'Squanchy';
14});

2. Create your reducer

1import {createReducer} from  'react-redux-human-hooks'
2import  *  as  actions  from  './actions';
3
4const  reducer  =  createReducer({
5	[actions.setAnimal]: (state, action) => ({
6		...state,
7		animal:  action.payload
8	}),
9	[actions.setDog]: (state, action) => ({
10		...state,
11		animal:  'Dog'
12	}),
13	[actions.setSquanch]: (state, action) => ({
14		...state,
15		animal:  'Squanchy'
16	}),
17	},
18	//Initial state
19	{
20		animal:  'Cat',
21	}
22);
23
24export  default  reducer;

3. Add Provider to your app

1import  React  from  'react';
2
3//We provide the necessary modules, you can also import them from redux and react-redux
4import {Provider,createStore} from  'react-redux-human-hooks';
5
6import  rootReducer  from  './reducer';
7import  MyComponent  from  './MyComponent';
8
9//Create the store, in this case we are using teh Redux Devtools middleware
10const  store  =  createStore(rootReducer,
11window.__REDUX_DEVTOOLS_EXTENSION__  &&
12window.__REDUX_DEVTOOLS_EXTENSION__());
13
14function  App() {
15	return (
16		//Note we are wrapping the entire app using Provider
17		<Provider  store={store}>
18			<div  className="App">
19				<header  className="App-header">
20					<h1>
21						React Redux Human Hooks Example
22					</h1>
23				</header>
24				<MyComponent/>
25			</div>
26		</Provider>
27	);
28}
29
30export  default  App;

4. Use it in your components

1import  React  from  'react';
2import {useReduxState,useBindActionCreators} from  'react-redux-human-hooks';
3import  *  as  actions  from  './actions';
4
5function  MyComponent() {
6	const {setDog,setAnimal,setSquanch} =  useBindActionCreators(actions);
7	const {animal} =  useReduxState(
8		state=>state
9	)
10
11	return (
12		<div  style={{backgroundColor:'#F1F1F1',display:'flex',flexDirection:'column'}}>
13			<h3>Animal: {animal}</h3>
14			<div>
15				<button  onClick={()=>setDog()}>Set Dog</button>
16				<button  onClick={()=>setAnimal(Math.random()>0.5?'Cat':'Moose')}>Set Random</button>
17				<button  onClick={()=>setSquanch()}>Set Squanch</button>
18			</div>
19		</div>
20	);
21}
22
23export  default  MyComponent;