Learning Redux电子书

Title Page

Copyright

Learning Redux

Credits

About the Author

Acknowledgments

About the Reviewer

www.PacktPub.com

Why subscribe?

Customer Feedback

Preface

About the book

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Downloading the color images of this book

Errata

Piracy

Questions

Why Redux?

Defining the application state

Defining actions

Tying state and actions together

Redux' three fundamental principles

Single source of truth

The read-only state

State changes are processed with pure functions

Introduction to the Redux ecosystem

Summary

Implementing the Elements of Redux

The Redux cycle

An action is dispatched

The main reducer function gets executed

Redux saves the new state

Strictly unidirectional data flow

Running code examples

Setting up a new project

Setting up Node.js

Initializing the project

Setting up webpack

Setting up Babel

Setting up the entry files

Running webpack

Setting up Redux

The template code

Implementing actions and action creators

Separating action types

ES2015 - import/export

Introducing action creators

ES2015 - arrow functions

ES2015 - import/export

Code example

Implementing reducers

Defining/importing action types

Defining action creators

Writing the posts reducer

The main structure of a reducer

ES2015 - using destructuring and the rest operator to parse the action

Handling CREATE_POST – creating a new post

Handling EDIT_POST – editing posts

Testing out our reducer

Writing the filter reducer

Combining reducers

Testing out the full reducer

Code example

The store – combining actions and reducers

Creating the store

Subscribing to state changes

Dispatching actions

Rendering the user interface

Creating sample data

Handling the user input

Code example

Summary

Combining Redux with React

Why React?

The principles of React

Setting up React

Rendering simple text

Rendering with JSX

Setting up JSX

Using JSX

Example code

First steps with React

Creating a simple React element

Creating a static React component

Functional components

Using components

Example code

Class components – dynamic React components

Creating a static class component

Creating a dynamic class component

Setting the initial state

React life cycle methods

Updating the state

Example – dynamic React component with timer

Example code

Connecting React to Redux

Presentational versus container components

Writing presentational components

Post component

PostList component

Example code

Writing container components

Implementing our own container component

Example code

Using React-Redux bindings to create a container component

Setting up React-Redux

Using React-Redux to create a container component

Using selectors

Example code

Building an application with Redux and React

The goal

Project structure

Defining the application state

Users state

Posts state

Filter state

Defining action types and action creators

Defining action types

Defining action creators

User action creators

Post action creators

Filter action creators

Implementing reducers

Users reducer

Posts reducer

Filter reducer

Root reducer

Setting up the Redux store

Code example – Redux-only application

Implementing the user interface

Implementing presentational components

User component

Post component

Timestamp component

PostList component

Filter component

FilterList component

Implementing container components

ConnectedPostList component

ConnectedFilterList component

Implementing the App component

Using <Provider>

Rendering the App component

Code example – React/Redux application

Further tasks

Summary

Combining Redux with Angular

Redux with Angular 1

Setting up Angular 1

Code example

Creating a basic Angular 1 application

Defining the module and controller

Code example

Setting up ng-redux

Redefining the controller

Dispatching actions from the user interface

Code example

Redux with Angular 2+

Setting up Angular 2+

Setting up @angular-redux/store

Code example

Summary

Debugging a Redux Application

Integrating Redux DevTools

Installing Redux DevTools

Creating a DevTools component

Connecting DevTools to Redux

Using the DevTools.instrument() store enhancer

Rendering DevTools

Implementing the persistState() store enhancer

Using multiple store enhancers

Implementing a simple session key provider

Do not re-dispatch on refresh

Using the store enhancer

Excluding Redux DevTools in production

Injecting the NODE_ENV environment variable with webpack

Adding new build scripts for production and development

Separating the production store from the development store

Implementing the development store

Implementing the production store

Importing the correct store

Importing and using configureStore()

Only loading the DevTools component in development mode

Running in production/development mode – example code

Setting up hot reloading

Hot reloading React components

Hot reloading other code with webpack

Hot reloading Redux reducers

Testing out hot reloading – example code

Using Redux DevTools

DockMonitor

Setup

Properties

LogMonitor

Setup

Usage

Properties

Inspector

Setup

Usage

Properties

SliderMonitor

Setup

Usage

Properties

ChartMonitor

Setup

Properties

Other monitors

Summary

Interfacing with APIs

Setting up the backend

The backend API

GET /api

Example output

GET /api/posts

Example output

GET /api/posts/:id

Example output

POST /api/posts

Example request

Example output

POST /api/posts/:id

Example request

Example output

GET /api/users

Example output

GET /api/users/:username

Example output

POST /api/users

Example request

Example output

POST /api/users/:username

Example request

Example output

Handling asynchronous operations with Redux

Dispatching multiple actions from an action creator

Defining action types

Creating an asynchronous action creator

Handling asynchronous action creators via middleware

Setting up redux-thunk middleware

Pulling data from an API into the Redux store

Extracting boilerplate code

Pulling posts from the API

Pulling users from the API

Fetching a single user

Fetching users when fetching posts

Handling loading state

Implementing the reducer

Implementing the component

Using the component

Handling error state

Implementing the reducer

Implementing the component

Using the component

Example code

Sending notifications to an API via Redux

Using asynchronous action creators

Creating users via the API

Creating posts via the API

Example code

Summary

User Authentication

JSON Web Tokens (JWT)

JSON Web Token structure

Header

Payload

Signature

Token

Using JSON Web Tokens

Implementing token authentication

Backend API

POST /api/login

Example request

Example output

POST /api/users

Example request

Example output

POST /api/posts

Example request

Example output

Secured routes

Storing the token in the Redux store

Defining the action types and action creator

Creating the reducer

Dispatching login action in the component

Testing out the login

Checking whether the user is logged in

Separating the header

Hiding/showing components when the user is logged in

Showing the currently loggedin user

Sending the token with certain requests

Example code

redux-auth

Summary

Testing

Setting up Jest

Testing automatically on every file change

Checking code coverage

Example code

Using Jest

Using test and describe

Matchers

.toBe or .not.toBe

Truthiness

Numbers

Strings

Arrays

Exceptions

All matchers

Testing asynchronous code

Callbacks

Promises

.resolves/.rejects

Setup and teardown

Running every time before/after each test

Running once before/after all tests

Scoping

Mocking

.mock property

Return values

Implementations

Special matchers

Testing Redux

Synchronous action creators

Reducers

Testing initial state

Initializing state with beforeEach()

Testing the setFilter action

Testing the clearFilter action

Reducers with async actions

Asynchronous action creators

Testing successful requests

Testing failing requests

Example code

Other tests

Testing React components

Summary

Routing

Creating a simple router

Defining the action types and action creator

Creating the reducer

Creating the page components

Creating the MainPage component

Creating the AboutPage component

Creating the Router component

Connecting the Router component to Redux

Using the Router component

Creating the Navigation component

Connecting the Navigation component to Redux

Using the Navigation component

Code example

Using a routing library

Introducing react-router

Static routing

Dynamic routing

Nested routes

More routing

Using react-router

Installing react-router

Defining the <Router> and <Route>

Defining the <Link>

Trying out the router

Marking the currently selected link

Using react-router with Redux

Do I need to connect my router to Redux?

Why deeply integrate my router with Redux?

Example code

Using react-router-redux

Installing react-router-redux

Using the routerMiddleware

Using the routerReducer

Using the ConnectedRouter

Testing out the router

Navigating by dispatching actions

Example code

Summary

Rendering on the Server

Why render on the server?

Current process to load the page

Using server-side rendering

Preparing for server-side rendering

Using the isomorphic-fetch library

Implementing server-side rendering

Handling the request/routing

Emulating the Redux store and browser history

Initializing the Redux store

Using react-router to decide which page to render

Handling react-router redirects

Injecting rendered React components into the index.html template

Injecting the preloaded Redux store state

Rendering the template file

Using the preloaded Redux store state

Caching the index page

Performance improvements

Summary

Solving Generic Problems with Higher-Order Functions

Making functions pure

Simple side effects

No side effects

Other side effects

Side effects and Redux

Creating higher-order functions

Functions as arguments

Functions as results

Solving generic problems with Redux

Higher-order reducers

Higher-order action creators

Higher-order components

Implementing generic undo/redo Redux

Setting up the counter application

Looking at the counter reducer

Implementing undo/redo in the counter application

Defining the action types

Defining the action creators

Defining the new state

Rewriting the counter reducer

Handling the counter-related actions

Handling the undo/redo actions

Creating undo/redo buttons

Trying out undo/redo

Example code

Implementing a generic undo/redo higher-order reducer

Defining the undoable higher-order reducer

Defining the initial state

Problems with our previous solution

A new kind of history

Defining a generic initial state

Handling generic undo/redo actions

Defining the action types

Defining the action creators

Implementing the enhanced reducer

Handling the undo action

Handling the redo action

Handling other actions (updating the present state)

Removing undo/redo logic from the counter reducer

Wrapping the counter reducer with undoable

Problems with our simple undoable higher-order reducer

Example code

Implementing redux-undo

Installing redux-undo

Wrapping our reducer with undoable

Adjusting the state selector

Importing the undo/redo actions

Debug mode

Example code

Summary

Extending the Redux Store via Middleware

What is middleware?

Express middleware

Creating our own middleware pattern

Sketching out the API

Creating the Middleware class

Defining the run method

Defining the use method

Using our own middleware pattern

Example code

Using the Redux store middleware

Implementing logging

Manual logging

Wrapping the dispatch function

Monkeypatching the dispatch function

Hiding monkeypatching

Getting rid of monkeypatching

Applying middleware

Implementing Redux middleware

Creating a middleware folder

Logging middleware

Error reporting middleware

Applying our middleware to the Redux store

Example code

Thunk middleware

Final tips and tricks

Designing the application state

Using indices

Normalized state

Organizing data in the application state

Updating an application state

Updating nested objects

Common mistake 1 - New variables that point to the same objects

Common mistake 2 - Only making a shallow copy

Correct approach - Copying all levels of nested data

Updating arrays

Inserting items

Removing items

Updating items

Mutating copies

Using libraries

Summary