Redux-part-1.md

Redux Part 1 Instructor Notes

Objectives

• Install modules to work add redux to a react application
• Create a redux store and connect it to react
• Create a reducer
• Create an action
• Explain the flow of information and actions of react and redux

Install modules to work add redux to a react application

• Install the following node modules
  • redux
  • react-redux

Create a redux store and connect it to react

• Create src/reducer.js file
  • import { combineReducers } from redux
  • export default combineReducer({})
• In src/index.js
  • import { createStore } from 'redux'
  • import { Provider } from 'react-redux'
  • Create store
  • Add store to the React Application

Create a reducer

• In src/reducer.js
  • Create reducer
  • Add new reducer to combineReducer
• In App.js
  • Replace class component with a functional component
  • import { connect } from 'react-redux'
  • Create mapStateToProps
  • connect component
  • create render

Create an action

• Create src/actions.js file
  • Create action creator
  • import action creator to App.js
  • trigger action creator

Explain the flow of information and actions of react and redux

• With your tables, explain how data flow from a reducer to a component
• With your groups, explain how the state can be updated

Practice

• Replicate the To Do application using Redux
• Update To Do application to use Redux