React, React Redux and Redux Saga - Master React State/Hooks

Create a two-column grid below the balance to display income and expenses with a green incoming statistic and a red expenses statistic.

Create an income and expense history view with a header, balance display, and a three-column grid showing items, amounts, and edit and trash icons, with color coding.

Designs an add new transaction form with labeled inputs, icons, description and value fields, and a primary-colored button group for cancel and submit actions.

Create a new ButtonSaveOrCancel component file and replace the button group in app.js by importing the named Button from semantic UI React; this refactor delivers an easy win.

Refactor the balances display into a new plural display balances component. Import the segment and grid, and wire it so the app renders both balances.

Refactor the entry line into its own functional React component, passing description, value, and expense props. Apply a ternary to color income green and expense red.

learn to create and manage state with useState, initialize with initial entries, and render a dynamic list of entries with descriptions, values, and expense flags.

Add unique keys to repeated components by using entry.id, fix prop passing by forwarding the entire entry, and demonstrate destructuring entry values to simplify rendering.

Demonstrates adding a new transaction by building a controlled form with useState for description and value, handling onChange, and updating entries with non-mutating concat in App.js.

Build an edit modal component in React by using Semantic UI React, controlling visibility with an isOpen state via useState, and toggling on click to edit an entry.

Reset entry state by clearing description and restoring isExpense to its default, using a reset function, and remove entryLog values as you test the app for Redux in next class.

Fix warnings by disabling eslint react-hooks exhaustive depth for useEffect, remove unused state variables, commit state changes with git, and start redux setup for continued work.

Set up Redux with React Redux and Redux Dev Tools, then create a Redux store using createStore, initialize state from initial entries, and inspect state with getState.

Dispatch actions with payload in redux by creating a payload object and using ES6 shorthand. Spread the payload into the action to update the store with the new values.

Fix a Redux code mistake by using state instead of entries, ensure pure function behavior, and subscribe to the store to observe all dispatches and store changes.

Create a new Redux action with a type and payload id, dispatch it to remove an entry, and handle it in the reducer using a pure filter update.

Create action functions to streamline Redux dispatches, enforce consistent payloads and types, and reliably add or remove entries in the Redux store.

Refactor the Redux setup by extracting the entries reducer, wiring it to createStore, and preparing for multiple reducers, while enforcing pure, synchronous reducers with no state or action mutations.

Wrap your app with the react-redux provider, pass the configured store, and access state.entries using the useSelector hook to reflect store data in components.

learn to replace inline state with redux dispatch for managing entries, using react-redux useDispatch to dispatch add and remove entry actions with an id payload.

Learn to add a new entry with React Redux hooks, dispatch an add entry action, move state out of app.js, and reset fields after dispatch.

Dispatch the open edit model action with the selected id using use dispatch, update the reducer with a spread state and payload id, and trigger the model.

Open a modal by wiring its isOpen state to redux. Use useSelector to read state.models.isOpen and dispatch actions to toggle it.

Pass the selected entry data to the modal model using the id, find the entry by index, and destructure the model data to access is open and the id.

Enhance the use entry details hook by passing an entry object, syncing description, value, and isExpense with use effect, and wiring updates for future dispatch and save actions.

Add a new update entry dispatch in the custom hook, building the updated entry from id, description, value, and expense, and verify the Redux state updates.

Install and configure json-server to simulate a backend with a db.json file, run it on port 3001, and use concurrently to start both front end and back end servers.

Learn how the json-server backend handles CRUD operations for /entries using Postman, including get all, get by id, post, put, and delete on localhost 3001.

Install redux-saga and configure saga middleware, then apply it with the middleware array to enable saga handling alongside Redux dev tools, and verify by running the app.

Explore generator functions and yield returns, showing how a function can exit and re-enter at points. Use a Chrome console example to see next, return, and the done status.

Explore an infinity generator that doubles its input and yields each new value. Call next to drive the generator, illustrating patterns used in sagas.

Demonstrate how generator functions and yield work, showing next advancing through values with done flags, and that logic or API calls can run between yields with re-entry continuing toward sagas.