Using React state with Context API and useReducer hooks.

1. React State Management
with React Hooks and
Context API
Simple alternative for your React-Redux App
Jan Ranostaj

2. ● Simple way to setup React State management, so you can remember it
without googling each time 😀
● Forget about using “connect” “mapStateToProps” and other unnecessary
boilerplate 🙏
● Combining Context API with useReducer hook makes easy access to the
data anywhere in the app 👊
● Do not need to pass data using “props” 👌
● Easy to test independently 😏
5 Reasons

3. Use with useState Hook

4. Global state configuration ./state.js

5. Use in your App

6. Access and Update state in Components

7. Use with useReducer Hook

8. Global state configuration ./state.js

9. Setup simple Reducer

10. Use in App

11. Read from state in the app

12. Update State in the app

13. Example with useReducer Hook
https://codesandbox.io/s/use-reducer-fd2no
Example with useState Hook
https://codesandbox.io/s/react-state-with-context-api-clem6
Time for code examples
Thanks 😏
Jan Ranostaj