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)