Redux Beginner Guide with React Hooks

Download the Node.js and npm installer for your operating system and architecture, run the executable to install, then verify the installation in the terminal.

Explore the tools used in this Redux beginner guide course and run them across cross-platform terminals on Windows, Linux, and macOS.

Learn how promises differ from async/await, reduce callback hell by sequentially chaining tasks, and handle errors with a single try/catch block for cleaner asynchronous code.

Explore the spread operator to copy and combine arrays, strings, and objects, and update objects with new properties.

Learn how to use object and array destructuring to extract properties and values into variables, with practical examples from objects and arrays.

Redux is a central state container for JavaScript apps that works with vanilla JavaScript and React bindings. It enables predictable state updates via actions and reducers, with time travel debugging.

Define redux actions as objects with a required type and optional payload, then create action creators that return these actions. Use constants for action types to prevent reducer mismatches.

Implement a reducer that updates the state by copying the previous state, handling actions via a switch on action.type, and appending payload data to the task list.

Create a redux store, dispatch actions, and update state with the reducer, while subscribing to changes and using payload to manage the task list.

Split state into a task reducer and a user reducer, then combine them into a single store with task and user keys to manage separate lists.

Explore redux middleware and how it sits between actions and reducers, enabling custom logging, authentication checks, and other use cases via applyMiddleware and the next function.

Implement asynchronous redux actions with redux-thunk to fetch todos from a placeholder API, dispatch results to the reducer, and update the to-do list while explaining middleware and axios usage.

Build a React task tracker with add, update, and remove actions, using Redux for app-level state and the latest React features.

Set up the header with react bootstrap by creating a header component, importing it, and rendering a navbar with branding text today task tracker in the app.

Install a dev dependency package to spin up a dummy api server, creating endpoints for posts, comments, and profile from a db.json and run on port 3001.

Define a get task action and its reducer to fetch and store tasks from an API, set up a dedicated task module, and prepare for Redux thunk middleware integration.

Install the redux dev tools extension and configure a redux store in your react app with thunk middleware and compose with devtools to debug and time travel app state.

Learn to dispatch the get task action from a React component using useDispatch and useEffect to fetch a task list and update the Redux state.

Fetch and render the task list from redux state with useSelector, map items to a bootstrap list group with badges and a delete icon, by using selectors.

Learn to manage a task list loading state in Redux with React hooks by dispatching get task begins, handling success or failure, and showing a centered loading spinner.

Install and configure the redux logger middleware, place it as the last middleware in applyMiddleware, and learn to view collapsed action logs in the console.

Implement a toast notification using react-toastify in a Redux beginner guide with React hooks, showing success and error messages, configuring the library, and auto closing after 1500 ms.

Learn to implement the add task action and reducer with redux and react hooks, using begin, success, and failure patterns, a post api call, and appending the task while loading.

Create an add task form UI that launches a modal from the add button, including a task name field and status radios (completed or pending) built with bootstrap.

Explore adding a task with Redux and React hooks by capturing task name and status, dispatching the add task action, and managing loading, toasts, and modal state.

Update the task list user interface by applying dynamic classes based on task status, using green for completed and red for pending, with line-through decoration for completed tasks.

Implements a delete task feature with Redux actions and a per-item loading spinner, updating the task list by filtering out the deleted task and showing the loader for that item.

Learn to implement a redux-driven update task status feature in a React app by adding a pending-only check button, dispatching update task actions with payload, and updating the list.

Explore time travel debugging in Redux by jumping between actions, viewing their types and payloads, and playing through each action to see state changes via the reducer.

Explore source code for managing state with Redux using React hooks, guiding beginners through practical patterns, actions, and reducers to build robust applications.