1// action type
2const FETCH_ALL = "FETCH_ALL";
3const FETCH_FAIL = "FETCH_FAIL";
4
5// initial state
6const fetchState = {
7  users: [],
8  error: ""
9};
10
11//action creator
12const fetchDataAsync = () => {
13  return (dispatch) => {
14    axios
15      .get("https://jsonplaceholder.typicode.com/users")
16      .then(({ data }) => dispatch({ type: FETCH_ALL, users: data }))
17      .catch((err) => dispatch({ type: FETCH_FAIL, error: err }));
18  };
19};
20
21// reducer
22const fetchReducer = (state = fetchState, action) => {
23  switch (action.type) {
24    case FETCH_ALL:
25      return action.users;
26    case FETCH_FAIL:
27      return { ...state, error: action.error };
28    default:
29      return state.users;
30  }
31};
32
33// store
34const reducers = combineReducers({ users: fetchReducer });
35const store = createStore(reducers, applyMiddleware(logger, thunk));
36
37//fetchAllData component
38import React, { useEffect } from "react";
39import { connect, useDispatch } from "react-redux";
40import { fetchDataAsync } from "../redux/Action";
41
42const FetchData = (props) => {
43  
44  const dispatch = useDispatch();
45  
46  useEffect(() => {
47    dispatch(fetchDataAsync());
48  }, []);
49
50  return (
51    <>
52      <ul>
53        {props.users.map((user) => (
54          <li key={user.id}>
55            {user.name} | {user.email}
56          </li>
57        ))}
58      </ul>
59    </>
60  );
61};
62
63const mapStateToProps = (state) => {
64  return { ...state };
65};
66
67export default connect(mapStateToProps)(FetchData);

1//EXAMPLE FETCH DATA API REDUX SAGA
2
3// USER ACTION CREATOR
4export const REQUEST_API_DATA = 'REQUEST_API_DATA'
5export const RECEIVE_API_DATA = 'RECEIVE_API_DATA'
6
7export const requestApiData = () => ({ type: REQUEST_API_DATA })
8
9// USER REDUCER
10import { REQUEST_API_DATA, RECEIVE_API_DATA } from '../actions/user'
11
12export default (state = {}, { type, payload }) => {
13  switch (type) {
14    case RECEIVE_API_DATA:
15      return payload.users
16    default:
17      return state
18  }
19}
20
21// USER SAGA
22import axios from 'axios'
23import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
24import { REQUEST_API_DATA, RECEIVE_API_DATA } from './actions/user'
25
26function* userReceiveAll(action) {
27  try {
28    const { data } = yield call(axios.get, 'https://jsonplaceholder.typicode.com/users')
29    yield put({ type: RECEIVE_API_DATA, payload: { users: data } })
30  } catch (e) {
31    console.log(e.message)
32  }
33}
34export default function* userSendAll() {
35  yield takeLatest(REQUEST_API_DATA, getApiData)
36}
37
38// REDUX STORE
39import { createStore, applyMiddleware, combineReducer } from 'redux'
40import createSagaMiddleware from 'redux-saga'
41import { all } from 'redux-saga/effects'
42import logger from 'redux-logger'
43import userReducer from './reducers/user'
44import userSaga from './sagas/user'
45
46function* saga() {
47  yield all([userSaga()]) 
48}
49
50export const store = () => {
51 const sagaMiddleware = createSagaMiddleware()
52 const store = createStore(combineReducer({users: userReducer}), 
53 applyMiddleware(sagaMiddleware, logger)) 
54 sagaMiddleware.run(saga)
55 return store;
56}
57
58// USER COMPONENT
59import React from 'react'
60import { connect } from 'react-redux'
61import { requestApiData } from './actions'
62
63class User extends React.Component {
64  componentDidMount() {
65    this.props.fetchAll()
66  }
67  render() {
68    const { users } = this.props.state
69    const results = users.length > 0 ? users : []
70    return (
71      <div>
72        {results.map((v) => (
73          <ul key={v.id}>
74            <li>{v.username}</li>
75          </ul>
76        ))}
77      </div>
78    )
79  }
80}
81
82const mapStateToProps = (state) => ({ state })
83const mapDispatchToProps = (dispatch) => ({ fetchAll: () => dispatch(requestApiData()) })
84
85export default connect(mapStateToProps, mapDispatchToProps)(User)