/intro-redux

An Intro and Overview of Redux with React

Primary LanguageJavaScript

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**