redux学习笔记——redux的基本概念

---

title: redux学习笔记

date: 2019-02-19 10:48:40

tags:

- redux

---

• 1. redux是什么？

  2013年facebook提出了facebook这一框架概念，而redux是flux的一种实现，将flux与函数式编程结合在一起的一个前端框架。

  flux是一个对数据流管理更加严格的MVC框架，其基本原则是单向数据流；

  redux在此基础上强调了三个基本原则：
  
    1. 唯一数据源；
  
    2. 保持状态只读；
  
    3. 数据改变只能通过纯函数完成
  

• 2. 为什么需要redux?

  当我们的组件树只有1层或者2层的时候，想从最上层透传属性还是很容易的事情，但是当组件层级越来越多，从底层父组件传递属性到达最末的叶子组件，整个过程的传输在代码上就显得相当的冗余，而且如果多个组件依赖于一个共同的属性，局部变化引起的全局变化很容易又会导致状态震荡，这也是令人倍感头疼的问题，所以redux就应运而生。

  其实react中强调的单向数据流几乎是需要依托redux才能实现的，当接入了redux之后，所有的状态变化都拘束到reducer(s)中进行，修改统一的数据源，然后再自上而下的重新分发，减少状态/属性传递的成本，也从根源上杜绝了状态震荡，而且redux将数据从react中分离，则理论上所有的react component都可以是无状态组件，那么渲染性能还能够得到进一步的提升。

• 3. redux的使用场景？

  react是Dom的抽象层，没有涉及代码结构和组件之间的通信，并不是web应用的完整方案；

  redux是非常有用的框架，但并不是非用不可，只有你遇到了react实在解决不了的情况，才用redux；

  那么什么时候可以考虑使用redux呢？如下：

    1.  用户的使用方式复杂
  
    2.  不同身份的用户有不同的使用方式
  
    3.  多个用户之间可以协作
  
    4.  与服务器大量交互，或者使用了WebSocket
  
    5.  View要从多个来源获取数据
  

  即从组件角度看如下场景需要使用redux

    1.  某个组件的状态需要共享
  
    2.  某个状态需要在任何地方都可以拿到；
  
    3.  一个组件需要改变另一个组件的状态；
  
    4.  一个组件需要改变全局状态；
  

  redux并不是web架构的唯一解决方案，不要把它当做万灵丹，如果应用没那么复杂，那就没必要用它。

• 4. redux的基本概念

  1) 设计思想

  a. web应用是一个状态机，视图与状态是一一对应的；
  
  b. 所有的状态，保存在一个对象里面；
  

  2）Store

  Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

  Redux提供createstore这个函数，用来生成Store

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

  上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

  3) State

  Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

  当前时刻的 State，可以通过store.getState()拿到。

  
  import { createStore } from 'redux';
  
  const store = createStore(fn);
  
  const state = store.getState();
  
  

  Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

  4) Action

  State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

  Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。

  
  const action = {
  
    type: 'ADD_TODO',
  
      payload: 'Learn Redux'
  
  };
  
  

  Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

  5) store.dispatch()

  store.dispatch()是 View 发出 Action 的唯一方法。

  
  import { createStore } from 'redux';
  
  const store = createStore(fn);
  
  store.dispatch({
  
      type: 'ADD_TODO',
  
      payload: 'Learn Redux'
  
  });
  
  

  store.dispatch接受一个 Action 对象作为参数，将它发送出去。

  6) Reducer

  Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

  Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State。

  store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

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

  createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。

  7) store.subscribe()

  Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数。

  
  import { createStore } from 'redux';
  
  const store = createStore(reducer);
  
  store.subscribe(listener);
  
  

  只要把 View 的更新函数（对于 React 项目，就是组件的render方法或setState方法）放入listen，就会实现 View 的自动渲染

  store.subscribe方法返回一个函数，调用这个函数就可以解除监听

  
  let unsubscribe = store.subscribe(() =>
  
  console.log(store.getState())
  
  );
  
  unsubscribe();