React and Redux Masterclass

Refactor the Button and Digits components from class instances to stateless function components using es6 arrow functions, props, and simplified handlers, preserving click behavior and app functionality.

Refactor a stateful display component into a function component, wiring text and clickHandler props, introducing updateDisplay and a state variable with initial value zero, and addressing render timing.

Make the display stateless by passing text from props, lift the update listener to the calculator container, and use force update to ensure digits render correctly.

Install redux and update package.json and yarn.lock, then create a store with initial state and enhancers, and a root reducer by combining reducers.

Remove the event emitter dependency by introducing a toggle history action dispatched through the store, and implement a show history reducer to flip the history state.

Refactor the history view to a function component, add a history reducer, and implement update expression and toggle history actions to fix operators and restore history in React and Redux.

Learn to decouple history from the store by passing show history and history as props, removing JSX store coupling and imports, and preview container component patterns.

Decouple component logic from its presentational layer by introducing a digits container with react-redux connect, mapping state and dispatch, and a digit click action to update the expression.

fixes a history tracking bug by using redux thunk to update history with the latest expression on digit clicks.

Refactor the history component into a presentational component and decouple it from the store, introducing a history container and dispatching update expression and toggle history actions.

Refactor the calculator by turning operators into a presentational component and creating an operators container, a higher-order component with redux thunk, dispatching update expression and handling operator clicks and clear/backspace.

Refactor the calculator app to be more reusable by turning fixed class names into props. Configure button, control panel, and history with props, and use char code 8592 for arrows.

Refactor the calculator component to use the provider instead of passing the store props, making the store available via react-redux Provider. Define context and prop types, and prepare for tests.

Learn to check your app’s test coverage with yarn --coverage in a Create React App, read the coverage report, and fix a backspace comma bug by writing tests.