Saying Goodbye to the Redux connect() Method and Container Components
In this lesson we remove the last bit of redux boilerplate we were relying on, the connect() method. In doing so we get rid of our "container" components. At this point all of our components are redux-enabled using the hooks API and we no longer need a separation between redux components and non-redux "presentational" components. With the hooks API redux and non-redux components work together seamlessly and this separation is no longer recommended.
At the end I do mention briefly that we still need to rely on the Redux <Provider> which is essential telling our redux hooks which store to reference. This is true both for rendering components in an app as well as while we're testing them. Any components relying on these hooks will still need to be wrapped in a <Provider>.
Jamund Ferguson: [0:03] In AmountField.js remove the AmountFieldContainer export at the bottom of the file. Do the same thing in CurrencyCodePicker and in RateTable.
[0:08] Back in ExchangeRate.js, instead of importing the container components, we'll simply import { RateTable } from "./RateTable", { CurrencyCodePicker } from "./CurrencyCodePicker", and { AmountField } from "./AmountField".
[0:27] Then in our component body, we can replace AmountFieldContainer with AmountField, RateTableContainer with RateTable, and CurrencyCodePickerContainer with CurrencyCodePicker.
[0:38] We also no longer need to export ExchangeRateContainer from ExchangeRate, and so in index.js we can replace ExchangeRateContainer with ExchangeRate and ExchangeRateContainer with ExchangeRate.
[0:49] We still need Provider to Redux enable our components, but we no longer need to use connect anywhere. Even though we've greatly simplified our components and removed almost all the Redux boilerplate, the app continues to work exactly as it did before.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!