Add Action Creator

Define mapDispatchToProps

 

Define methods we want to access from props in the component:

Then access this method inside the component via props:

Set Up Thunk

1. Install redux-thunk via npm

2. Import { applyMiddleWare} from ‘redux’

3. Import thunk from ‘redux-thunk’

4. Add applyMiddleWare(thunk) as store enhancer to createStore()

Action Creator Concept

Pass Props Down to Components

Define mapStateToProps

Add whatever properties you want to get in the props in the component:

Connect Component to State

Connect() is a function that returns a Higher Order Component (HOC).

 

Create Store

• Import { createStore} from ‘redux’
• Import rootReducer from ‘<path>’
• Import { Provider } from ‘react-redux’
• Wrap <App> with store provider <Provider></Provider>

Create Root Reducer

Root Reducer combines different reducers together:

Create Reducer

Create a reducer:

• add initState
• add arrow function