Как загрузить данные в реакции с redux-thunk, redux-saga, suspense & hooks

const jsonServer = require('json-server');const server = jsonServer.create();const router = jsonServer.router('db.json');const middleware = jsonServer.defaults();

server.use((req, res, next) => {   setTimeout(() => next(), 2000);});server.use(middleware);server.use(router);server.listen(4000, () => {   console.log(`JSON Server is running...`);});

{ "users": [   {     "id": 1,     "firstName": "John",     "lastName": "Doe",     "active": true,     "posts": 10,     "messages": 50   },   ...   {     "id": 8,     "firstName": "Clay",     "lastName": "Chung",     "active": true,     "posts": 8,     "messages": 5   } ]}

const API_BASE_ADDRESS = 'http://localhost:4000';

export default class Api {   static getUsers() {       const uri = API_BASE_ADDRESS + "/users";

       return fetch(uri, {           method: 'GET'       });   }}

npm install redux-thunk

import { applyMiddleware, compose, createStore } from 'redux';import thunk from 'redux-thunk';import rootReducer from './appReducers';

export function configureStore(initialState) { const middleware = [thunk];

 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(...middleware)));

 return store;}

import Api from "../api"

export const LOAD_USERS_LOADING = 'REDUX_THUNK_LOAD_USERS_LOADING';export const LOAD_USERS_SUCCESS = 'REDUX_THUNK_LOAD_USERS_SUCCESS';export const LOAD_USERS_ERROR = 'REDUX_THUNK_LOAD_USERS_ERROR';

export const loadUsers = () => dispatch => {   dispatch({ type: LOAD_USERS_LOADING });

   Api.getUsers()       .then(response => response.json())       .then(           data => dispatch({ type: LOAD_USERS_SUCCESS, data }),           error => dispatch({ type: LOAD_USERS_ERROR, error: error.message || 'Unexpected Error!!!' })       )};

import {LOAD_USERS_ERROR, LOAD_USERS_LOADING, LOAD_USERS_SUCCESS} from "./actions";

const initialState = {   data: [],   loading: false,   error: ''};

export default function reduxThunkReducer(state = initialState, action) {   switch (action.type) {       case LOAD_USERS_LOADING: {           return {               ...state,               loading: true,               error:''           };       }       case LOAD_USERS_SUCCESS: {           return {               ...state,               data: action.data,               loading: false           }       }       case LOAD_USERS_ERROR: {           return {               ...state,               loading: false,               error: action.error           };       }       default: {           return state;       }   }}

import * as React from 'react';import { connect } from 'react-redux';import {loadUsers} from "./actions";

class UsersWithReduxThunk extends React.Component {   componentDidMount() {       this.props.loadUsers();   };

   render() {       if (this.props.loading) {           return 
Loading
       }

       if (this.props.error) {           return 
ERROR: {this.props.error}
       }

       return (                          {this.props.data.map(u =>                                          <;td>{u.posts}                                      )}               
               
                   
                       
First Name
                       
Last Name
                       
;Active?
                       
Posts
                       
Messages
                   
               
               
                       
{u.firstName}
                       
{u.lastName}
                       
{u.active ? 'Yes' : 'No'}
{u.messages}
                   
           
       );   }}

const mapStateToProps = state => ({   data: state.reduxThunk.data,   loading: state.reduxThunk.loading,   error: state.reduxThunk.error,});

const mapDispatchToProps = {   loadUsers};

export default connect(   mapStateToProps,   mapDispatchToProps)(UsersWithReduxThunk);

npm install redux-saga

import { applyMiddleware, compose, createStore } from 'redux';import createSagaMiddleware from 'redux-saga';import rootReducer from './appReducers';import usersSaga from "../redux-saga/sagas";

const sagaMiddleware = createSagaMiddleware();

export function configureStore(initialState) { const middleware = [sagaMiddleware];

 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore(rootReducer, initialState, composeEnhancers(applyMiddleware(...middleware)));

 sagaMiddleware.run(usersSaga);

 return store;}

export const LOAD_USERS_LOADING = 'REDUX_SAGA_LOAD_USERS_LOADING';export const LOAD_USERS_SUCCESS = 'REDUX_SAGA_LOAD_USERS_SUCCESS';export const LOAD_USERS_ERROR = 'REDUX_SAGA_LOAD_USERS_ERROR';

export const loadUsers = () => dispatch => {   dispatch({ type: LOAD_USERS_LOADING });};

import { put, takeEvery, takeLatest } from 'redux-saga/effects'import {loadUsersSuccess, LOAD_USERS_ERROR, LOAD_USERS_LOADING, LOAD_USERS_SUCCESS} from "./actions";import Api from '../api'

async function fetchAsync(func) {   const response = await func();

   if (response.ok) {       return await response.json();   }

   throw new Error("Unexpected error!!!");}

function* fetchUser() {   try {       const users = yield fetchAsync(Api.getUsers);

       yield put({type: LOAD_USERS_SUCCESS, data: users});   } catch (e) {       yield put({type: LOAD_USERS_ERROR, error: e.message});   }}

export function* usersSaga() {   // Allows concurrent fetches of users   yield takeEvery(LOAD_USERS_LOADING, fetchUser);

   // Does not allow concurrent fetches of users   // yield takeLatest(LOAD_USERS_LOADING, fetchUser);}

export default usersSaga;

import {LOAD_USERS_ERROR, LOAD_USERS_LOADING, LOAD_USERS_SUCCESS} from "./actions";

const initialState = {   data: [],   loading: false,   error: ''};

export default function reduxSagaReducer(state = initialState, action) {   switch (action.type) {       case LOAD_USERS_LOADING: {           return {               ...state,               loading: true,               error:''           };       }       case LOAD_USERS_SUCCESS: {           return {               ...state,               data: action.data,               loading: false           }       }       case LOAD_USERS_ERROR: {           return {               ...state,               loading: false,               error: action.error           };       }       default: {           return state;       }   }}

import * as React from 'react';import {connect} from 'react-redux';import {loadUsers} from "./actions";

class UsersWithReduxSaga extends React.Component {   componentDidMount() {       this.props.loadUsers();   };

   render() {       if (this.props.loading) {           return 
Loading
       }

       if (this.props.error) {           return 
ERROR: {this.props.error}
       }

       return (           ;                                  {this.props.data.map(u =>                                          )}               
               
                   
                       
First Name
                       
Last Name
                       
;Active?
                       
Posts
                       
Messages
                   
               
                           
{u.firstName}
                           
;{u.lastName}
                           
{u.active ? 'Yes' : 'No'}
                           
{u.posts}
                           
{u.messages}
                       
           
       );   }}

const mapStateToProps = state => ({   data: state.reduxSaga.data,   loading: state.reduxSaga.loading,   error: state.reduxSaga.error,});

const mapDispatchToProps = {   loadUsers};

export default connect(   mapStateToProps,   mapDispatchToProps)(UsersWithReduxSaga);

import {createCache} from 'simple-cache-provider';

export let cache;

function initCache() { cache = createCache(initCache);}

initCache();

import React from 'react';

export class ErrorBoundary extends React.Component { state = {};

 componentDidCatch(error) {   this.setState({ error: error.message || "Unexpected error" }); }

 render() {   if (this.state.error) {     return 
ERROR: {this.state.error || 'Unexpected Error'}
;   }

   return this.props.children; }}

export default ErrorBoundary;

import * as React from 'react';import {createResource} from "simple-cache-provider";import {cache} from "./cache";import Api from "../api";

let UsersResource = createResource(async () => {   const response = await Api.getUsers();   const json = await response.json();

   return json;});

class UsersTable extends React.Component {   render() {       let users = UsersResource.read(cache);

       return (                          {users.map(u =>                                          <;td>{u.posts}                                      )}               
               
               
                   
First Name
                   
;Last Name
                   
Active?
                   
Posts
                   
Messages
               
               
               
                       
{u.firstName}
                       
{u.lastName}
                       
{u.active ? 'Yes' : 'No'}
{u.messages}
                   
           
       );   }}

export default UsersTable;

import * as React from 'react';import UsersTable from "./UsersTable";import ErrorBoundary from "./ErrorBoundary";

class UsersWithSuspense extends React.Component {   render() {       return (                          Loading

export default UsersWithSuspense;

import React, {useState, useEffect} from 'react';import Api from "../api";

function UsersWithHooks() {   const [data, setData] = useState([]);   const [loading, setLoading] = useState(true);   const [error, setError] = useState('');

   useEffect(async () => {       try {           const response = await Api.getUsers();           const json = await response.json();

           setData(json);       } catch (e) {           setError(e.message || 'Unexpected error');       }

       setLoading(false);   }, []);

   if (loading) {       return 
Loading
   }

   if (error) {       return 
ERROR: {error}
   }

   return (       ;                          {data.map(u =>               ;                   ;                              )}           
           
           
First Name
               
Last Name
               
Active?
               
Posts
               
Messages
           
           
           
;{u.firstName}
{u.lastName}
                   
{u.active ? 'Yes' : 'No'}<;/td>                   
{u.posts}
                   
{u.messages}
               
       
   );}

export default UsersWithHooks;