This project was bootstrapped with Create React App.
React hook boilerplate is redux like application but no redux
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:
npm start
The Setup
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
npm i react-router-dom
- let's start from create a store first, I have create configureStore.js under store folder
; ; const StateContext = ;const DispatchContext = ; const useStateValue = ;const useDispatch = ; { const state dispatch = ; return <DispatchContextProvider value=dispatch> <StateContextProvider value=state> propschildren </StateContextProvider> </DispatchContextProvider> ; } ;
-
since application grow will handle more and more complex state, so I create two separate reducer as example how to handle them
-
userReducer
; const userReducer = { } ;
- bookReducer
; const bookReducer = { } ;
- rootReducer
; ; const rootReducer = { // middleware goes here, i.e calling analytics service, etc. return book: user: } 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 ... ;
- action that work exactly like redux
; const updateSelectedUser =
- UserComponent build in react hook and reader data from your stor and fire action
; ; const UserInfo = { const handleClick = { ; }; return <tr onClick= className=`` > <td>userbalance</td> <td><img src=userpicture width=60 height=80/></td> <td>userage</td> <td>username</td> <td>usergender</td> <td>usercompany</td> <td>useremail</td> </tr> } { const user = ; const list selected = user; const dispatch = ; const handleOnClick = ; 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 </tbody> </table> }
- appRouter.js
;; ; 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> } ;
- App.js
;;;; { return <Store> <AppRouter/> </Store> ;} ;
- middleware that could be build a separeat file and put it into my rootReduce
const rootReducer = { // middleware goes here, i.e calling analytics service, etc. return book: user: }
Conclusion
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.