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.

Push a create react app to GitHub by creating a repository, setting origin, creating the main branch, committing ui changes, and pushing to the remote.

Create a main header component in a new components folder, using props for title. Define the default type as h1 and render with destructured props in Semantic UI React.

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.

Create a new entry form React component as a functional component, import the Form and Button from Semantic UI React, and refactor the form into small components.

refactor the display balance component to accept title, value, color, and size, and reuse it for income, expenses, and your balance with color defaulting to black and a default size.

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.

Use hooks and props to bring real values into the app, pass data to display balances and the entry form from App.js, and refactor with three options.

Push your latest React project updates by stopping the dev server, removing unused grid elements, staging changes with git add ., committing a refactor message, and pushing to origin.

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.

Map an array of entries in React using entries.map to render each item, update variables to the current entry, and prepare for refactoring into a separate component.

Create a reusable React functional component to render a list of entries, pass the entries via props, and keep the main component clean by extracting entry lines.

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.

Create a delete entry function that filters the entries array by id. Update state immutably with the filtered result, and pass the function to the delete button.

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.

Add a toggle to distinguish expenses from income using a useState state isExpense, wire it to a toggle with onChange, and include isExpense in the save entry flow.

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.

Format and build a reusable modal by defining header, content, and description, add save and close actions, wire close with an isOpen setter, and refactor into separate reusable components.

Refactor the entry form by splitting content into two components, creating an entry form component for the how part, and pass state and setters as props to improve reusability.

refactor the app by moving all entry state to the top level, wire props and setters to open the model, and simplify without redux while keeping components cohesive.

Refactor state to support editing entries in a React app by passing the entry ID through components, opening the modal with the selected entry data, and preloading the edit form.

Learn to wire a modal with useEffect in React, track an entry id, update the entries immutably, and close the modal after saving.

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.

Calculate totals with useEffect by iterating entries, summing income and expenses based on isExpense, and deriving a final total to store in state.

Create three state values for income total, expense total, and overall total with useState, then render these totals in the balance display as preparation for Redux.

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 a type via the store, handle them in a reducer using a switch on action.type (case Add entry), and return a new entries array with entries.concat.

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.

Use combineReducers to merge multiple reducers into one store, organizing data as keyed reducers (entries, descriptions) so you fetch only what you need and wire them into createStore.

Refactor Redux by separating actions, reducers, and the store into dedicated folders and files. Create a configure store function, export the store, and update app wiring with the new imports.

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.

install a new package on yarn called Uuid (universal unique ID) and import v4 as uuidv4 from 'uuid' to generate unique entry IDs, preventing key duplication in React.

Install the Redux DevTools Chrome extension and configure your store with compose dev tools to view dispatches, actions, and the evolving state for debugging.

Create a custom hook useEntryDetails to encapsulate entry form state and actions, returning description, setDescription, value, setValue, isExpense, and addEntry for reusable modal handling.

Create a new Redux action to update an entry by id, implement a reducer case that immutably updates the entry, and open the dialogue to edit before dispatching the update.

Create a Redux store module to manage a modal's open and closed state with an id payload using a models reducer and actions.

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.

Dispatch the close edit model action with useDispatch, then fix the reducer to set open to false and update the id, so the modal closes as expected.

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.

Explore firing two dispatches in sequence: update entry with redux, then close the edit modal to dismiss it and save the updated data.

Refine a custom hook by extracting a reset values helper function and calling it when updating or adding entries, keeping the form ready for new data.

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.

Create and run your first saga using a generator function, a test saga with console logs, and delay from Redux Saga effects, while configuring the store with saga middleware.

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.