Advanced React and Redux

Learn how to name and organize React tests with Jest, including .test.js files, __test__ directories, and app.test.js vs app.spec, plus importing React and the component.

Switch to absolute imports by configuring a dot ENV file with node_path=SRC, update app.test.js, app.js, and index.js to use SRC paths, and restart the test runner and dev server.

Explore testing a comment box component with enzyme using full DOM render to verify a visible text area and button, text input, form submission, and clearing the text area.

Extracts common setup into a beforeEach, and ensures afterEach unmounts the CommentBox to prevent test pollution, creating a fresh instance for each test in this file.

Learn to test a comment box by simulating a change event on the text area, wiring its value and onChange to setState and re-render with a fake event.

Create a dedicated root.js to export a component that provides a Redux store via React Redux, wrapping app components and enabling tests to render with a store.

Set up a Redux-connected component test with Enzyme's mount and a root provider, and verify each comment renders as an li with visible text. Discuss injecting test data into Redux.

Test a React and Redux comment list by verifying the number of rendered comments and the visible text for each comment using enzyme render and cheerio toContain text.

Implement a simple authentication flow by adding an auth reducer that defaults to false and a change_auth action creator to toggle the signed-in state.

Explore how the Redux promise middleware and a middleware stack inspect actions, handle promises, and re-dispatch new actions through all middlewares until reducers receive data.

Create a user model with email and password using Mongoose, enforcing uniqueness and lowercase normalization, then define a schema, build a model class, and export it for use with MongoDB.

Install and configure mongodb on OS X using Homebrew, update brew, install mongodb, create data/db, take ownership of the directory, and start mongod to run the server.

Understand how bcrypt stores the salt and the hashed password and uses them to verify sign-in by re-hashing the submitted password. Add a compare password method on the user model.

Wrap the app in a BrowserRouter, add a welcome route at the root, and render it through the app's children prop to centralize routing and component rendering.

Discover how test reports reveal which specs ran and failed using describe, it, and expect in React projects. Explore live reloading and test driven development through planning and building features.

Refactor tests with beforeEach to render components ahead of time, then verify the app displays a comment box by asserting the presence of a .comment-box element.

Flip the user authentication state by introducing a CHANGE_AUTH action, an authenticate action creator, and a simple authentication reducer wired to state.authenticated.

Learn to build a require authentication higher-order component that wraps any child component, guards protected routes by redirecting unauthenticated users to the home route, and passes props through.

Learn how to implement a middleware with the three-function signature to handle asynchronous actions, using an async.js example that logs each action and forwards it to reducers via next.

Leverage an async middleware to resolve actions with promise payloads before reaching reducers, by dispatching a new action with the same type after resolution and re-running through all middlewares.

Hook email and password fields to redux form, wire the on submit handler, and route the sign in form via redux router with this.props.children.

Explore how a single action creator handles authentication by submitting email and password to the server, then redirects to /feature, updates state, and saves the token with error handling.

Improve form validation in advanced React and Redux by enforcing required fields for email, password, and password confirmation, showing per-field errors on touch, and exploring code refactors.

Implement client-side authentication with signinUser and signupUser, localStorage token management, sign-out handling, signup validation via redux form, imperative validate function, and the RequireAuth higher-order component guarding Feature in the router.