This project was bootstrapped with Create React App.
You could use this quickly setup for react hook working with context api and use multiply reducer applications. No more redux needed anymore.
In the project directory, you can run:
Make sure you have Nodejs installed on your machine (I’m using version v12.6.0) and we’ll put the app together using,
create-react-app:
$ npx create-react-app react-hooker-boilerplate
Once it’s done, start it by running $ npm start in your project directory.
Then open the package.json file. require node version 16.8 above
The "react-hooker-boilerplate" will follow Redux three fundamental principles, stores, actions, and reducers. But build by useing context api working with useReducer
- let's start from create a store first, I have create configureStore.js under store folder
import React, {createContext, useContext, useReducer} from 'react';
import rootReducer, { initialState } from '../reducers/index';
const StateContext = createContext();
const DispatchContext = createContext();
export const useStateValue = () => useContext(StateContext);
export const useDispatch = () => useContext(DispatchContext);
function Store(props) {
const [state, dispatch] = useReducer(rootReducer, initialState);
return (
<DispatchContext.Provider value={dispatch}>
<StateContext.Provider value={state}>
{props.children}
</StateContext.Provider>
</DispatchContext.Provider>
);
}
export default Store;-
since application grow will handle more and more complex state, so I create two separate reducer as example how to handle them
-
userReducer
import { UPDATE_SELECTED_USER } from '../constants/actionConstants';
const userReducer = (state, action) => {
switch (action.type) {
case UPDATE_SELECTED_USER:
return {
...state,
selected: action.selected
}
default:
return state;
}
}
export default userReducer;- bookReducer
import { UPDATE_SELECTED_BOOK } from '../constants/actionConstants';
const bookReducer = (state, action) => {
switch (action.type) {
case UPDATE_SELECTED_BOOK:
return {
...state,
selected: action.selected
}
default:
return state;
}
}
export default bookReducer;- rootReducer
import bookReducer from './bookReducer';
import userReducer from './userReducer';
const rootReducer = ({book, user}, action) => {
// middleware goes here, i.e calling analytics service, etc.
return {
book: bookReducer(book, action),
user: userReducer(user, action)
}
}
export const initialState = {
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
},
...
]
}
}
export default rootReducer;- action that work exactly like redux
import { UPDATE_SELECTED_USER } from '../constants/actionConstants';
export const updateSelectedUser = (dispatch, user) =>
dispatch ({
type: UPDATE_SELECTED_USER,
selected: user
})- UserComponent build in react hook and reader data from your stor and fire action
import React from 'react'
import { useStateValue, useDispatch } from '../../store/configureStore';
import { updateSelectedUser } from '../../reducers/user.action';
const UserInfo = ({user, selected, onClick}) => {
const handleClick = (user) => e => {
onClick(user);
};
return (
<tr
onClick={handleClick(user)}
className={`${user === selected ? 'hightlight' : '' }`}
>
<td>{user.balance}</td>
<td><img src={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>
)
}
export default function UserComponent() {
const {user} = useStateValue();
const {list, selected} = user;
const dispatch = useDispatch();
const handleOnClick = 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) => <UserInfo key={idx} user={item} selected={selected} onClick={handleOnClick} /> )}
</tbody>
</table>
)
}- appRouter.js
import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import {
BookComponent,
UserComponent,
Home
} from './components/';
const AppRouter = () => {
return (
<Router>
<div>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/user">User</Link>
</li>
<li>
<Link to="/book">Book</Link>
</li>
</ul>
<hr />
<Route exact path="/" component={Home} />
<Route path="/user" component={UserComponent} />
<Route path="/book" component={BookComponent} />
</div>
</Router>
)
}
export default AppRouter;
- App.js
import React from 'react';
import AppRouter from './AppRouter';
import './App.css';
import Store from './store/configureStore';
function App() {
return (
<Store>
<AppRouter/>
</Store>
);
}
export default App;
- middleware that could be build a separeat file and put it into my rootReduce
const rootReducer = ({book, user}, action) => {
// middleware goes here, i.e calling analytics service, etc.
return {
book: bookReducer(book, action),
user: userReducer(user, action)
}
}As you can see with the power of the context api and react hooks it can entirely get rid of redux but working like redux application.