Book Image

Learning Redux

By : Daniel Bugl
Book Image

Learning Redux

By: Daniel Bugl

Overview of this book

The book starts with a short introduction to the principles and the ecosystem of Redux, then moves on to show how to implement the basic elements of Redux and put them together. Afterward, you are going to learn how to integrate Redux with other frameworks, such as React and Angular. Along the way, you are going to develop a blog application. To practice developing growing applications with Redux, we are going to start from nothing and keep adding features to our application throughout the book. You are going to learn how to integrate and use Redux DevTools to debug applications, and access external APIs with Redux. You are also going to get acquainted with writing tests for all elements of a Redux application. Furthermore, we are going to cover important concepts in web development, such as routing, user authentication, and communication with a backend server After explaining how to use Redux and how powerful its ecosystem can be, the book teaches you how to make your own abstractions on top of Redux, such as higher-order reducers and middleware. By the end of the book, you are going to be able to develop and maintain Redux applications with ease. In addition to learning about Redux, you are going be familiar with its ecosystem, and learn a lot about JavaScript itself, including best practices and patterns.
Table of Contents (13 chapters)

Introduction to the Redux ecosystem

As a result of Redux' small API and principles that make it very extensible, there is a huge ecosystem surrounding it. You will learn about some libraries throughout this book:

  • react-redux: These are the official React bindings for Redux. They allow you to inject (parts of) the Redux store into your React components. Furthermore, they inject action creators (functions that return action objects), which can automatically dispatch actions to the Redux store. This allows you to communicate in both ways between React and Redux (https://github.com/reactjs/react-redux).
  • ng-redux: This library lets you connect your Angular components with Redux. It works similar to React-Redux (https://github.com/angular-redux/ng-redux).
  • @angular-redux/store: This library helps you to integrate the Redux store with Angular 2+ applications, similar to react-redux. It uses an approach based on RxJS Observables to select and transform data from the Redux store. It allows you to inject this data into your UI or side-effect handlers (https://github.com/angular-redux/store).
  • redux-devtools: This is the official implementation of developer tools for Redux and allows watching state changes, live editing of actions, time traveling, and more. There are many monitor components available, each of them allowing you to debug your application in different ways. For a list of monitors, check out the redux-devtools repository on GitHub (https://github.com/gaearon/redux-devtools).
  • redux-promise: This is middleware for Redux that allows you to dispatch JavaScript promises to the Redux store. These promises will be evaluated and can result in multiple actions, for example, a success and an error action as the result of a server request (https://github.com/acdlite/redux-promise).
  • redux-auth: This library allows you to easily integrate token-based authentication into your Redux application. It supports various ways of authentication, such as OAuth2 and e-mail authentication. It also includes React components for common functionality—for example, registration, login, logout, password reset, updating passwords, and deleting accounts. These components include support for various themes, such as Material UI and React Bootstrap. Overall, this is a very extensive library that should simplify dealing with authentication a lot (https://github.com/lynndylanhurley/redux-auth).
  • react-router-redux: This allows for additional communication between React Router and Redux. You can use React Router without this library, but it is useful to record, persist, and replay user actions using the time traveling. It also helps you keep the routing-related state in sync with your Redux store (https://github.com/reactjs/react-router-redux).
  • redux-UI-router: This library is similar to react-router-redux, but for Angular. It maintains router state for your Angular application via Redux (https://github.com/neilff/redux-ui-router).
  • @angular-redux/router: This is basically the same as redux-UI-Router, but for Angular 2. It maintains router state for your Angular 2 application via Redux (https://github.com/angular-redux/router).
  • redux-undo: This is a higher-order reducer that allows you to make an existing reducer undoable. Basically, it is the easiest way to implement the undo/redo functionality with Redux (https://github.com/omnidan/redux-undo).
  • redux-logger: This is middleware to log Redux actions and state changes in the console (https://github.com/evgenyrodionov/redux-logger).

You can find an official overview of the Redux ecosystem on the Redux website: http://redux.js.org/docs/introduction/Ecosystem.html.

There is also a community-maintained repository called Awesome Redux, which contains resources, libraries, boilerplates, and examples related to Redux: https://github.com/xgrommx/awesome-redux.