Exercise: React Redux part 1 (Connecting Components to Redux)

Idea: Introduction to Redux (connect, mapStateToProps, Provider).
Background: https://react-redux.js.org/api/connect and https://react-redux.js.org/using-react-redux/connect-mapstate

In this exercise you have to connect React to Redux by passing a mapStateToProps function to the Redux connect function.


Step 1 (project creation and installing the react-redux)
Download and unzip the initial unfinish project: 'react-redux-counter-exercise.zip' in your 'react-redux' folder.
Open VSCode and navigate to the new folder. In the new App folder run 'mpn install'.

The Counter component is having a little trouble. The goal is to show a 'counter' and two buttons to either increase or decrease the counter. Everything on the Redux side of the app - including action creators, store, and reducers - has been completed, but the React and Redux sides of the app don't quite interact with each other yet.

Step 2 (connect( ), mapStateToProps( ))
Make sure that the connect function is passed a mapStateToProps function so that the component receives the count piece of state.
Hint: Don't forget to import connect from 'react-redux' and to export the counter: export default connect(..., {..,..})(Counter)
Hint: Look at - https://react-redux.js.org/using-react-redux/connect-mapstate

Step 3 (props)
Make sure that the Counter component prints out the current count inside of the <span> element.
Hint: use {..}

Step 4 (increment, decrement)
Make sure the 'connent' function gets called with the increment and decrement action creators.
Hint: connect(...., {increment, decrement})(...)

Step 5 (Increment, Decrement)
Make sure that clicking on the Increment or Decrement buttons calls the appropriate action creator.
Hint: onClick={....}

Step 6 (Provider)
Make sure that the store is provided for the app.
Hint: import the Provider from 'react-redux' and wrap the App with the provider, passing the store (created with createStore(countReducer)

Congratulation! - React-Redux is also Great!.

/ Henrik H