【前端丛林】React这样服用，效果更佳（14）

Lotzinfly
62 阅读5分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

前言

哈喽大家好，我是Lotzinfly，一位前端小猎人。欢迎大家再次来到前端丛林，在这里你将会遇到各种各样的前端猎物，我希望可以把这些前端猎物统统拿下，嚼碎了服用，并成为自己身上的骨肉。今天是我们冒险的第十四天，昨天我们深入了解了mobx及其应用，今天会给大家介绍一下Redux，看看Redux在React中到底有哪些作用，让我们探寻其中的奥秘。话不多说，开始我们的冒险之旅吧！

1. Redux应用场景

  • 随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难
  • Redux的出现就是为了解决state里的数据问题
  • 在React中，数据在组件中是单向流动的
  • 数据从一个方向父组件流向子组件(通过props)，由于这个特征，两个非父子关系的组件（或者称作兄弟组件）之间的通信就比较麻烦

Redux 本身非常简单，它的设计思想与 React 有异曲同工之妙，均是希望用最少的 API 实现最核心的功能。

image.png

“Redux”本身指 redux 这个 npm 包，它提供若干 API 让我们使用 reducer 创建 store，并能够更新 store 中的数据或获取 store 中最新的状态。而“Redux 应用”则是指使用了 redux 这个 npm 包并结合了视图层实现（如 React）及其他前端应用必备组件（路由库、Ajax 请求库）组成的完整的类 Flux 思想的前端应用

2. Redux设计思想

  • Redux是将整个应用状态存储到到一个地方，称为store
  • 里面保存一棵状态树state tree
  • 组件可以派发dispatch行为action给store,而不是直接通知其它组件
  • 其它组件可以通过订阅store中的状态(state)来刷新自己的视图

image.png

3. Redux三大原则

  1. 状态修改均由纯函数完成。整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store中
  2. State 是只读的。状态是只读的惟一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象 使用纯函数来执行修改，为了描述action如何改变state tree ，你需要编写 reducers
  3. 单一数据源。单一数据源的设计让React的组件之间的通信更加方便，同时也便于状态的统一管理

4.Redux 核心 API

  • Redux 的核心是一个 store，这个 store 由 Redux 提供的 createStore(reducers[, initialState])方法生成。从函数签名看出，要想生成 store，必须要传入 reducers，同时也可以传入第二个可选参数初始化状态（initialState）。

  • 在 Redux 里，负责响应 action 并修改数据的角色就是 reducer。reducer 本质上是一个函数，其函数签名为 reducer(previousState, action) => newState。可以看出，reducer 在处理 action 的同时，还需要接受一个 previousState 参数。所以，reducer 的职责就是根据 previousState 和action 计算出新的 newState。

  • Redux 这个名字就是来源于 Reduce+Flux，可见 reducer 在整个Redux 架构中拥有举足轻重的作用。

Redux 中最核心的 API——createStore：

import { createStore } from 'redux';
const store = createStore(reducers);

通过 createStore 方法创建的 store 是一个对象，它本身又包含 4 个方法：

  • getState()：获取 store 中当前的状态。
  • dispatch(action)：分发一个 action，并返回这个 action，这是唯一能改变 store 中数据的方式。
  • subscribe(listener)：注册一个监听者，它在 store 发生变化时被调用。
  • replaceReducer(nextReducer)：更新当前 store 里的 reducer，一般只会在开发模式中调用该方法。

在实际使用中，我们最常用的是 getState() 和 dispatch() 这两个方法。至于 subscribe() 和replaceReducer()方法，一般会在 Redux 与某个系统（如 React）做桥接的时候使用。

5.与 React 绑定

  • 前面说到 Redux 的核心只有一个 createStore() 方法，但是仅仅使用这个方法还不足以让Redux 在我们的 React 应用中发挥作用。我们还需要 react-redux 库——Redux 官方提供的 React绑定。

  • 很多刚刚接触 React 和 Redux 的开发者可能会好奇，明明有了 Redux，为什么还需要react-redux，为什么不把它们放在一起？事实上，这是一种前端框架或类库的架构趋势，即尽可能做到平台无关（platform agnostic）。之前也提到过，即便是 React，也在 0.14 版本之后拆分了 React 和 ReactDOM 两个库。这样拆分的好处在于，一个类库从核心逻辑上、具体与平台相关的实现上这两个层面做了拆分，能保证核心功能做到最大程度的跨平台复用。

  • react-redux 提供了一个组件和一个 API 帮助 Redux 和 React 进行绑定，一个是 React 组件 ，一个是 connect()。关于它们，只需要知道的是， 接受一个 store 作为props，它是整个 Redux 应用的顶层组件，而 connect() 提供了在整个 React 应用的任意组件中获取 store 中数据的功能。

结尾

好啦，这期的前端丛林大冒险先到这里啦！这期我们简单了解了Redux的概念。这期的内容比较好理解，下期让我们来看看Redux到底有哪些应用。这期内容要好好啃下来嚼烂嚼透。希望大家可以好好品尝并消化，迅速升级，接下来我们才更好地过五关斩六将！好啦，我们下期再见。拜拜！

avatar
文章
阅读
粉丝