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.