haticecs / usefetch-with-usereducer

This is the simple implementation of useFetch custom hook with useReducer to fetch data in react App.

useFetch Custom Hook with useReducer

This is the simple implementation of useFetch custom hook with useReducer to fetch data in react App.

Recall ✨

Inside src we have following folders.

src
├── components
│   ├── Posts.jsx
└── hooks
|    └── useFetch.js
└── actions
|    └── actions.js
└── reducers
    └── fetchReducer.js

In the React docs it says useReducer accepts a reducer of type (state, action) => newState and returns the current state paired with a dispatch method.

const [state, dispatch] = useReducer(reducer, initialState);

So, we need reducer function in the useReducer and, it will be called as dispatch() in the component.

✅ reducers stores reducer function that is defined as a useReducer's first argument.

    👉 reducer taskes the action as parameter, and changes state accordingly via conditional (ex.swith-case) blocks.

✅ actions stores action types in our case FETCH_INIT, FETCH_START, FETCH_FAILURE.

✅ hooks store useFetch and it uses useReducer and useEffect to fetch data.

Executing program

clone or download the repository

git clone

go to project folder

cd usefetch-with-usereducer

install dependencies

yarn or npm install

start

yarn start or npm start