Exercise: Redux Thunk part 1 (Formular 1) Exercise: Redux Thunk part 1 (Formular 1)Idea: Introduction to Redux-Thunk (applyMiddleware(thunk)).
Background: https://github.com/reduxjs/redux-thunk, https://daveceddia.com/what-is-a-thunk/ and https://medium.com/fullstack-academy/thunks-in-redux-the-basics-85e538a3fe60
Resource: http://ergast.com/mrd/
In this exercise you have to implement the Middleware Thunk in a small React-Redux App. The App is the wellknown Formular 1 App and could look something like this:
Step 1 (create-react-app)
Run 'create-react-app formular1' to create a new React App.
Step 2 (install packages)
Navigate to the new folder: /formular1 and run: 'npm install --save redux react-redux axios redux-thunk'.
Step 3 (index.html)
Open public/index.html and add link/script tags for using Bootstrap.
Hint: look at the index.html file in eg. react-redux-movie-input-output-solved.zip.
Step 4 (Sanitize src)
Sanitize/clean up the src folder and add the following new folders: actions, apis, components and reducers
Step 5 (src/index.js)
1) Add proper import statements:
Notice the new 'applyMiddleware' from 'redux' and 'thunk' from 'redux-thunk'.
2) Create the store with reducers and middleware (even we haven't created any reducers yet):
3) Wrap the App tag in a Provider tag: <Provider store={store}><App/></Provider>
Step 6 (driversReducer.js)
1) Create a new file driversReducer.js in the reducer folder. Add a dummy reducer (to avoid warnings in the console window) like:
export default (state=[ ], action) => {return null; };
2) Create a new file index.js in the reduce folder. Import the driversReducer, and the combineReducers from redux. Call and export combineReducers:
import { combineReducers } from 'redux';
import driversReducer from './driverReducer';
export default combineReducers( {drivers: driversReducer} );
Step 7 (components/App.js)
1) Make a dummy App components.
Hint: Your dummy App component must import the relevant libraries and implement class App and default export the App.
2) Verify that your "dummy" React App is up and running (with no warnings in the dev tools console window)
Step 8 (apis/ergast.js)
Create a new file: ergast.js in the apis folder. The file should import axios, call axios.create( ) and have a default export of the result. (notice: the baseURL is 'http://ergast.com'):
import axios from 'axios';
export default axios.create( {baseURL: 'http://ergast.com'} );
Step 9 (actions/index.js)
Create a new file: index.js in the actions folder. Import ergast and implement the action creator fetchDrivers( ).
Notice: the action creator dosen't return an action, but a function!. Thunk (the Middleware) invokes the function, and when the response is ready, it makes a new call to the dispatcher with the real action object: {type: 'FETCVH_DRIVERS', payload: response.data.MRData.DriverTable.Drivers}
Step 10 (driversReducer.js)
Now you are ready to exchange the dummy part of the reducer with the following switch statement:
switch (action.type){ case 'FETCH_DRIVERS': return action.payload; default: return state; }
Step 11 (DriverList.js)
Create a new file: DriverList.js in the components folder.
1) import React, {connect} and {fetchDrivers}
2) In class DriverList add the Hookmethod: componenDidMount:
componentDidMount(){ this.props.fetchDrivers( ); }
3) In class DriverList add a renderList method, that uses the map-method to generate li-items with driverinfo like:
4) Impement the render method - let it call renderList( ):
5) Create mapStateToProps, call connect with mapStateToProps and fetchDrivers, export the DriverList:
Step 12 (Header.js)
Create a new component Header.js. The component should display a header like the one you saw in the top of the exercise.
Step 13 (App.js)
Update App.js - insert the <Head /> and <DriverList /> tags and verify that you see the list of F1 Drivers.
Congratulation! - Yes Thunk was also easy is to use! (Do you want a challenge - then continue with the extra exercises)
/ Henrik H
Step 14 (Show a list of all the Races)
Look at: http://ergast.com/api/f1/2019/races.json and you will find information about all the F1-races in 2019.
Make a new component RaceList, a new reducer racesReducer and a action createor fetchRaces and find out how to wire all that stuff up - so you can display Race informations.
Step 15 (Routing)
Introduce Routing in your App, so it is possible to display Driver information and Race information in 2 different "pages".
Step 16 (Results from a Race)
Look at: http://ergast.com/api/f1/2019/1/results.json and you will find information about the first F1 race in 2019.
Couldn't it be nice to display race information in you App? Try, and don't forget a new Route ;-)
Step 17 (More F1 information)
Look at: http://ergast.com/mrd/ maybe you find other F1 informations you "need to have" in your new fancy React-Redux-Thunk-Axios-Router App.
Enjoy
/Henrik
