codinggarden / intro-redux

An Intro and Overview of Redux with React

Intro to Redux with React

• What is application state?
• What is Redux?
• Redux Diagram/Flow
  • Action Creators
  • Actions
  • Reducers
  • Store
  • Containers Components
    • connect
      • mapStateToProps
      • mapDispatchToProps
  • Presentational Components
• Convert a Simple Todo React app to Redux
  • yarn add redux react-redux redux-logger
  • Create a basic store
    • state
    • reducer
    • export reducer
  • Render App with Provider wrapper and store
  • Connect container to the store
    • mapStateToProps
    • Convert to use props instead of state
  • Convert change handlers to action types and reducers
    • action types
    • actions
    • reducer
    • mapDispatchToProps
    • Convert method calls to dispatch calls
• Convert a Simple Image Search React app to Redux (API calls)
  • Convert to redux...
  • Add an async action middleware
    • redux-promise-middleware
    • redux-thunk
    • redux-saga
• View a more complex example of how to organize the code
• Try out the new Context API**
  • https://reactjs.org/blog/2018/03/29/react-v-16-3.html