React Redux Thunk

Redux Thunk middleware allows you to write action creators that return a function instead of an action. In this exercise you will see the use of redux thunk to return a function. At the end of this exercise you will be able to:

• Use Redux Thunk middleware to return a function instead of an action
• Use a logger to print a log of actions initiated on the Redux store.

Installing Redux Thunk and Logger

• Install Redux Thunk and Logger as shown below:
$ npm install redux react-redux react-redux-form redux-thunk redux-logger --save

• Then open configureStore.js and update it to use the Thunk and Logger as follows:

• Next, open ActionTypes.js and add new action types as follows:

• Then open ActionCreators.js and add new actions:

• Next, open dishes.js and add the code to respond to actions as follows:

• Add a new component named LoadingComponent.js to display a loading message as follows:

• Now we will update the remaining components to use the actions. First, open MainComponent.js and update it as follows:

• Open DishdetailComponent.js and update it as follows:

• Open HomeComponent.js and update it as follows:

• Finally, update MenuComponent.js as follows:

(source: Front-End Web Development with React on Coursera)