React hook boilerplate is redux like application but no redux

npm start

The Setup

The "react-hooker-boilerplate" will follow Redux three fundamentalprinciples,stores,actions, andreducers. But build by useing context api working with useReducer

npm i react-router-dom

importReact,{createContext,useContext,useReducer}from'react';importrootReducer,{initialState}from'../reducers/index';constStateContext=createContext();constDispatchContext=createContext();exportconstuseStateValue=()=>useContext(StateContext);exportconstuseDispatch=()=>useContext(DispatchContext);functionStore(props){const[state,dispatch]=useReducer(rootReducer,initialState);return(<DispatchContext.Providervalue={dispatch}><StateContext.Providervalue={state}>{props.children}</StateContext.Provider></DispatchContext.Provider>);}exportdefaultStore;

import{UPDATE_SELECTED_USER}from'../constants/actionConstants';constuserReducer=(state,action)=>{switch(action.type){caseUPDATE_SELECTED_USER:return{                ...state,selected:action.selected}default:returnstate;}}exportdefaultuserReducer;

import{UPDATE_SELECTED_BOOK}from'../constants/actionConstants';constbookReducer=(state,action)=>{switch(action.type){caseUPDATE_SELECTED_BOOK:return{                ...state,selected:action.selected}default:returnstate;}}exportdefaultbookReducer;

importbookReducerfrom'./bookReducer';importuserReducerfrom'./userReducer';constrootReducer=({book, user},action)=>{// middleware goes here, i.e calling analytics service, etc.return{book:bookReducer(book,action),user:userReducer(user,action)}}exportconstinitialState={user:{list:[{"balance":"$3,946.45","picture":"http://placehold.it/32x32","age":23,"name":"Bird Ramsey","gender":"male","company":"NIMON","email":"birdramsey@nimon.com"},            ....],selected:null},book:{selected:null,list:[{"author":"Chinua Achebe","country":"Nigeria","imageLink":"images/things-fall-apart.jpg","language":"English","link":"https://en.wikipedia.org/wiki/Things_Fall_Apart\n","pages":209,"title":"Things Fall Apart","year":1958},            ...]}}exportdefaultrootReducer;

import{UPDATE_SELECTED_USER}from'../constants/actionConstants';exportconstupdateSelectedUser=(dispatch,user)=>dispatch({type:UPDATE_SELECTED_USER,selected:user})

importReactfrom'react'import{useStateValue,useDispatch}from'../../store/configureStore';import{updateSelectedUser}from'../../reducers/user.action';constUserInfo=({user, selected, onClick})=>{consthandleClick=(user)=>e=>{onClick(user);};return(<tronClick={handleClick(user)}className={`${user===selected ?'hightlight' :''}`}><td>{user.balance}</td><td><imgsrc={user.picture}width={60}height={80}/></td><td>{user.age}</td><td>{user.name}</td><td>{user.gender}</td><td>{user.company}</td><td>{user.email}</td></tr>)}exportdefaultfunctionUserComponent(){const{user}=useStateValue();const{list, selected}=user;constdispatch=useDispatch();consthandleOnClick=user=>updateSelectedUser(dispatch,user);return(<table><tbody><tr><th>balance</th><th>picture</th><th>age</th><th>name</th><th>gender</th><th>company</th><th>email</th></tr>{list.map((item,idx)=><UserInfokey={idx}user={item}selected={selected}onClick={handleOnClick}/>)}</tbody></table>)}

importReactfrom'react';import{BrowserRouterasRouter,Route,Link}from"react-router-dom";import{BookComponent,UserComponent,Home}from'./components/';constAppRouter=()=>{return(<Router><div><ul><li><Linkto="/">Home</Link></li><li><Linkto="/user">User</Link></li><li><Linkto="/book">Book</Link></li></ul><hr/><Routeexactpath="/"component={Home}/><Routepath="/user"component={UserComponent}/><Routepath="/book"component={BookComponent}/></div></Router>)}exportdefaultAppRouter;

importReactfrom'react';importAppRouterfrom'./AppRouter';import'./App.css';importStorefrom'./store/configureStore';functionApp(){return(<Store><AppRouter/></Store>);}exportdefaultApp;

constrootReducer=({book, user},action)=>{// middleware goes here, i.e calling analytics service, etc.return{book:bookReducer(book,action),user:userReducer(user,action)}}

Conclusion