/redux-lectures

Primary LanguageRuby

Redux

Intro to Redux

In the first part of the lecture, we'll talk about what Redux is, when it is useful, and some key concepts around using Redux.

Check the INTRO.md file for more!

Resources

There is a lot of new terminology to learn in Redux; use this Redux Cheat Sheet made by former Flatiron instructor Alex Griffith as a handy reference in case you need a refresher on any content from these lectures.

Videos

SWBATs

  • Understand why Redux is useful
  • Explain what a pure function is
  • Explain the pattern / technique of message passing
  • Refactor a component's behavior to use message passing
  • Install the redux library so it can be used in a project.
  • Create a store in redux with some default state.
  • Create a reducer to change state based on an action.type.
  • Use dispatch to send an action to the store to make changes to state.
  • Read state in the store.

React Redux

In the 2nd part of the lecture, we go over connecting Redux to React using react-redux and using some common functions from the react-redux library to let our components interact with the Redux store.

Videos

SWBATs

  • Install the react-redux library so it can be used in a project.
  • Make the store available to their application by using the Provider component.
  • Use connect to give components the ability to listen for changes to the store.
  • Use dispatch in a React component.
  • Use mapStateToProps to read data from the state in the Redux store.
  • Use mapDispatchToProps
  • Bonus Use action creators & object form of mapDispatchToProps
  • Bonus React-Redux hooks: useSelector and useDispatch

Part 3: Redux Project Mode

We'll add redux to a React project and go through all the necessary setup. We'll also talk about code organization, as well as some additional tools such as redux-thunk for working with fetch and redux, and the Redux DevTools.

Videos

SWBATs

  • Set up a project with Redux and React-Redux
  • Organize Redux code
  • Use Redux DevTools
  • Install the redux-thunk library
  • Use applyMiddleware from the redux library and thunkMiddleware from the redux-thunk library
  • Create action creators that return functions in order to dispatch asynchronously
  • Discuss best practices of action architecture when using thunk