React：Redux 详解（1）

Redux

一、简介

• redux 是 JavaScript 状态容器，提供可预测化的状态管理。redux通过一个唯一的store，实现统筹管理所有数据状态，这些状态包括服务器响应、缓存数据、本地生成尚未持久化到服务器的数据、UI 状态等。

  Redux就是集中管理数据状态的工具
  

• redux的三大原则
  1. 单一数据源
     redux的数据都存放在store中，保证数据来源的唯一性，同时更便于应用的数据交互；
  2. state是只读状态
      action可以去取state的值，但是不能直接对state进行修改；
  3. 使用纯函数修改state
      利用reducer改变原有的state状态，并生成一个新的state返回

---

二、Redux 的主要组成部分

2.1 Action

• Action 是把数据从应用传到 store的有效载荷。它是 store 数据的唯一来源。一般通过store.dispatch()将 action 传到store。

• Action就是一个普通对象。其中type属性是必须包含的，并且是唯一的（建议大写），用来区分不同的Action。其余属性可以自行设置。

• Action是从组件内发出的。当用户产生交互时，试图引起store中state的改变，但此时用户不能直接操作state，所以此时需要通过store.dispatch()将 action 传到store，从而触发state的更新。

• Action 的创建：

  //actionType.js
  
  //定义对Action常量统一管理的js文件
  export const ADDACTION = "ADDACTION";
  

  //actionCreator.js
  
  //定义需要的 action
  import { ADDACTION } from "./actionType.js";
  export default {
  	addDate : ( payload ) => ({
  		type : ADDACTION,
  		payload
  	})
  }
  

• Action 的发送：

  //组件内
  
  import store from "../store";      // 导入定义好的store，store的定义详见下文
  import actionCreator from "./actionCreator.js";   //导入定义好的action
  
  store.dispatch( actionCreator.addDate(" information ") )   
  //组件内调用该方法发送action，
  // "information" 为准备添加至 store 的数据
  

  ---

2.2 Reducer

• reducer 指定了应用如何响应actions并更新store中state。 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新state。

• 我们可以将reducer看作是action和store之间的纽带，state的更新只能通过reducer。

• reducer是一个函数，它需要两个参数：一个是默认的state；另一个是action。最终经过处理过后reducer会返回一个新的state赋值给store。

• reducer的创建：

  //reducer.js
  
  import { ADDACTION } from "./actionType.js";  //导入Action常量
  const initState = {   //定义初始化的state
  	info: ''
  };
  //由于Reducer是纯函数，函数的返回结果是由action和state决定的
  export default (state = initState, {type, payload}) => {
  	switch (type) {
  	    case ADDACTION :
  	      return {...state, info:payload};  //使用浅拷贝，保障reducer为纯函数
  	    default:
  	      return state;
  	}
  }
  

  Q：什么是纯函数？
  A：纯函数是函数式编程的概念，需要满足以下约束条件：
    1. 不得改写参数
    2. 不能调用系统 I/O 的 API
    3. 不能调用Data.now()或Math.random()等不纯的方法，因为每次得到的结果不一样

• reducer的模块化：

  //reducers.js
  
  import { combineReducers } from 'redux';  //通过该方法可以使reducer模块化
  import testAction from "./reducer.js";
  
  export default combineReducers({
      test : testAction
  });
  

  Redux提供combineReducers方法，用来将reducer拆分。可以定义多个reducer函数，最终用该方法将它们组合成一个大的reducer。

  ---

2.3 Store

• Store是应用的数据存储容器，一个应用只能有一个store。不同的组件和页面都可以从这个容器中拿到需要的数据。
• Store的职责：
  1. 维持应用的 state；
  2. 提供 getState() 方法获取 state；
  3. 提供 dispatch(action) 方法更新 state；
  4. 通过 subscribe(listener) 注册监听器；
  5. 通过 subscribe(listener) 返回的函数注销监听器；
• Store的创建：

  import { createStore } from 'redux';  //通过createStore方法生成store对象
  import Reducers from './reducers'; //导入模块化后的reducers
  
  //createStore()会接收一个Reducer作为参数，返回生成的Store对象
  const store = createStore(Reducers);
  export default store;
  

• 设置监听：
  • 使用 store.subscribe方法设置监听函数，一旦state发生变化，就自动执行这个函数。
  • store.subscribe方法返回一个函数，调用这个函数就可以解除监听。

  //组件内
  
  import store from "../store"; //导入生成后的store
  //设置监听，state发生变化后执行回调
  let unsubscribe = store.subscribe(() =>
  	console.log(store.getState())
  );
  
  //解除监听
  unsubscribe();
  

---

优雅的逆战班（未完待续 ······）