掌握React状态管理：Redux与 MobX实践指南

需积分: 9 12 浏览量更新于2024-07-18 收藏 784KB PDF 举报

《掌控React状态管理：Redux与MobX之旅》是由Robin Wieruch编写的书籍，专为希望深入学习React、Redux和MobX（一种前端状态管理库）的开发者设计。该书于2017年10月19日发布，采用Leanpub平台的轻量化出版模式，作者鼓励读者参与反馈循环，通过不断迭代完善内容，确保提供最适合读者需求的资源。本书主要探讨如何有效地管理和控制在React应用中的状态，包括React的基本概念、编辑器和终端环境的设置、Node.js和npm的使用以及本地状态管理的原理。作者从定义和纯函数的角度出发，引导读者理解单向数据流（MVC）的概念，如Redux中的store和actions，以及MobX的观察者模式。在第一部分的"Introduction"中，作者会介绍全书的目的和结构，帮助读者对整体学习路径有清晰的认识。"About the Author"章节将介绍Robin Wieruch的专业背景，让读者了解他在这个领域的经验和贡献。 "Requirements"部分概述了阅读本书所需的最低技术要求，确保读者具备必要的基础。接下来，章节会逐步引导读者安装和配置开发工具，如编辑器（如VS Code或Atom）和Node.js环境，以便进行实践操作。 "Node and NPM"章节涵盖了Node.js环境的安装和npm包管理工具的使用，这对于构建React应用和依赖管理至关重要。"FAQ"则解答了一些常见的问题，帮助读者解决可能遇到的疑惑。 "如何阅读这本书"这一章提供了阅读指南，强调了实践和互动的重要性，鼓励读者在学习过程中尝试动手实践，以加深理解和记忆。"Local State Management"则是核心内容，讲解React自身的状态管理机制，然后过渡到Redux和MobX，对比它们的实现方式和适用场景。 "Definitions"部分会定义关键术语，如React组件、props、state等，确保读者对基础概念有清晰的理解。"Pure Functions"在这里扮演着重要角色，它们是React组件保持高效和可预测的重要手段。总结来说，《掌控React状态管理》是一本实战型教程，适合那些希望通过Redux和MobX提升React应用状态管理能力的开发者。作者通过清晰的指导和实例，帮助读者掌握这些流行的状态管理库，从而更好地构建高效、可维护的前端应用程序。

Introduction ix

The React library is used as view layer library in this book to demonstrate the usage of state

management in modern applications. However, fortunately, a view layer is exchangeable. If you

are learning state management to apply it to another view layer library, such as Vue, you can try to

substitute React with Vue on your own. The book doesn’t want to dictate the view layer library or

framework. If you are brave, you can apply the learnings in your very own application where you

want to introduce state management while reading the book.

Another hint is to make notes while you read the book. You can write down questions where the

book doesn’t give you an answer and look them up afterward. Or you can write down your learnings

to internalize them. That is how I do it when I read a book. Last but not least, if you write down

feedback about the book, you can send me your notes afterward. I am highly interested to improve

the book all the time to keep the quality up.

It should be obvious by now that you will have the best outcome of this book by having a laptop on

your side. You can join the Slack Group

to get help from others or to help others yourself. When

having a laptop on your side, you can directly apply your new learnings and confront yourself with

the hands-on chapters. As mentioned before, no one learned something by just reading a book.

https://slack-the-road-to-learn-react.wieruch.com/

Local State Management 2

Definitions

Before we dive into state management, this chapter gives you general definitions and definitions for

state managements to build up a common vocabulary for state management for this book. It should

help you to follow the book effortlessly when reading it without leaving space for confusion.

Pure Functions

Pure functions is a concept from the functional programming paradigm. It says that a pure function

always returns the same output if given the same input. There is no layer in between that could alter

the output on the way when the input doesn’t change. The layer in between, that could possibly alter

the output, is called side-effect. Thus, pure functions have no side-effects. Two major benefits of

these pure functions are predictability and testability.

Immutability

Immutability is a concept of functional programming, too. It says that a data structure is immutable

when it cannot be changed. When there is the need to modify the immutable data structure, for

instance an object, you would always return a new object. Rather than altering the object at hand,

you would create a new object based on the old object and the modification. The old and new object

would have their own instances.

Immutable data structures have the benefit of predictability. For instance, when sharing an object

through the whole application, it could lead to bugs when altering the object directly, because every

stakeholder has a reference to this potentially altered object. It would be unpredictable what happens

when an object changes and a handful of stakeholders are dependent on this object. In a growing

application, it is difficult to oversee the places where the object is currently used by its reference.

The antagonist of immutability is called mutability. It says that an object can be modified.

State

State is a broad word in modern applications. When speaking about application state, it could be

anything that needs to live and be modified in the browser. It could be an entity state that was

retrieved from a backend application or a view state in the application, for instance, when toggling

a popup to show additional information.

I will refer to the former one as entity state and to the latter one as view state. Entity state is data

retrieved from the backend. It could be a list of authors or the user object describing the user that

is currently logged in to the application. View state, on the other hand, doesn’t need to be stored in

the backend. It is used when you open up a modal or switch a box from preview to edit mode.

When speaking about managing the state, meaning initializing, modifying and deleting state, it will

be coined under the umbrella term of state management. Yet, state management is a much broader

Local State Management 3

topic. While the mentioned actions are low-level operations, almost implementation details, the

architecture, best practices and patterns around state management stay abstract. State management

involves all these topics to keep your application state durable.

The Size of State

State can be an atomic object or one large aggregated object. When speaking about the view state,

that only determines whether a popup is open or closed, it is an atomic state object. When the

whole application state can be derived from on aggregated object, which includes all the atomic

state objects, it is called a global state object. Often, a global state object implies that it is accessible

from everywhere, but that’s not necessarily the case.

The state itself can be differentiated into local state and sophisticated state. The management of

this state is called local state management and sophisticated state management.

Local State

The naming local state is widely accepted in the web development community. Another term might

be internal component state.

Local state is bound to components. It lives in the view layer. It is not stored somewhere else. That’s

why it is called local state because it is colocated to the component.

In React, the local state is embraced by using this.state and this.setState(). But it can have

a different implementation and usage in other view layer or SPA solutions. The book explains and

showcases the local state in React before diving into sophisticated state management with external

libraries.

Sophisticated State

I cannot say that it is widely agreed on to call it sophisticated state in the web development

community. However, at some point you need a term to distinguish it from local state. That’s why

I often refer to it as sophisticated state. In other resources, you might find it referred to as external

state, because it lives outside of the local component or outside of the view layer.

Most often, sophisticated state is outsourced to libraries that are library or framework agnostic and

thus agnostic to the view layer. But most often they provide a bridge to access and modify state

from the view layer. When using only local state in a scaling application, you will allocate too much

state along your components in the view layer. However, at some point you want to separate these

concerns. That’s when sophisticated state comes into play.

Two libraries that are known for handling sophisticated state are called Redux and MobX. Both

libraries will be explained, discussed and showcased in this book.

剩余264页未读，继续阅读

jk0455

粉丝: 0
资源: 6

掌握React状态管理：Redux与 MobX实践指南

react中使用vuex管理状态

React开发实战.pdf

react-2KBReact状态管理库可让您轻松处理本地状态并扩展至全局状态

React状态管理与项目构建命令指南

react-concent是一个专为react提供状态管理服务的框架

react-使用reacthooks实现的简单全局状态管理

reactnative debugger tools

构建超市应用：React测试与状态管理探索

React入门教程：掌握状态管理和项目构建

深入理解Redux与React-Redux：实现状态管理

最新资源