一、概述

什么是Redux

Redux是一个JavaScript状态容器 提供可预测化的状态管理
简单来说 就是存储数据的(和Vuex类似)

Redux可以构建一致化的应用 运行于不同的环境(客户端、服务器、原生应用) 并且易于测试
不仅于此 它还提供了超爽的开发体验
除了和 React 一起用外Redux还支持其它界面库
它体小精悍(包括依赖只有2kB)

为什么要使用Redux

随着JavaScript单页面开发日趋复杂 JavaScript需要管理更多的state(状态)
这些state可能包括服务器响应 缓存数据 本地生成未持久化到服务器的数据或UI状态 等等
因此 管理这些不断变化的state会非常麻烦
若一个model变化 那么可能会引起另一个model的变化
当view变化时 可能引起对应的model及其它model的变化 由此引起另一个view的变化 从而产生混乱

而Redux正是为解决此问题而产生的

Redux三大核心知识

1、单一数据源

整个应用的state都会被统一存储到一个Object tree中 且该Object tree只存在与唯一的一个store容器中

2.store是只读的

state无法通过直接赋值来改变
唯一改变state的方法就是触发action(就像在Vuex中 触发mutations一样)

这样 确保了视图和网络请你去都无法直接修改state 它们只能表达想要修改的意图 所有具体的修改操作都被集中化处理

3、使用纯函数执行修改

为了描述action如何改变state tree 需要编写reducers
Redux中的reducers其实就跟Vuex中的mutations一样 只是一个纯函数
接收先前的state和action并且返回新的state
reducers可以复用 控制顺序 传入附加参数 等等

Redux的组成部分

1、State / 状态

State就是传递的数据 具体可分成三类：
DomainData：服务器端的数据 比如用户信息 商品列表 等
UI State：当前UI展示的情况 比如弹出框的显示隐藏 受控组件 等
App State：App级别的状态 比如当前是否请求loading 当前路由信息 等可能被多个组件使用到的状态

2、Action / 事件

Action是将数据从应用传递到store的载体 它是store中的数据的唯一来源
通常可通过store.dispatch()将action传递给store

Action的本质就是一个普通的JavaScript对象 其内部必须要有一个type属性用于表示要执行的动作
多数情况下 该type会被定义为字符串常量
除了type字段外 action的结构可随意定义

注：Action只是描述有事情将要发生 并未描述如何更新state

3、Reducer / 缩减器

Reducer的本质就是一个函数 用于响应发送来的action事件(类似于中转站)
在经过处理后 将state发送给store

注：在Reducer函数中 需要return返回值 这样 Store才能接收到数据
Reducer函数接收两个参数 第一个参数是初始化state 第二个是action

4、Store / 数据仓库

Store就是将action和reducer关联到一起的对象

作用：

• 1、维持应用的state
• 2、提供getState()方法以获取state
• 3、提供dispatch()方法以发送action
• 4、提供subscribe()方法以注册监听
• 5、提供subscribe()的返回值以取消监听

二、安装

npm i redux -S 

三、基本使用

创建action的构建函数：

为提高复用性 需将action构建函数单独抽离为一个文件

action/index.jsx：

const sendAction = () => { return {         type:"send_action",         value:"Hello World" } }  module.exports={     sendAction } 

创建reducer的处理函数：

该reducer专门处理发送的action

设置默认值的原因是 当Redux运行会自动发送一次action以确保能正常运行
此时 为了使返回的state不是空的 需要设置一个默认值以在页面上展示或进行逻辑处理

reducer/index.jsx：

// 初始化state的默认值 const initState = {     value:"This is defaultValue" } const reducer = (state=initState,action) => { // 若发送来的action的type属性相匹配 if (action.type==='send_action') { // 将state和action进行组合 通过return将返回值传给store return Object.assign({},state,action) } else { // 通过return将返回值传给store return state     } }  module.exports={     reducer } 

创建store数据仓库：

store/index.jsx：

//  导入createStore方法 import {createStore} from 'redux' // 导入自己的reducer import {reducer} from '../reducer' // 构建store const store=createStore(reducer) export default store 

在组件内使用：

import React from 'react'; // 导入store import store from '../store' // 导入action import {sendAction} from '../action' export default class Home extends React.Component { constructor(props) { super(props); this.state = { } } // 组件被加载即监听 componentWillMount() {         store.subscribe(() => {             console.log("subscribe : ",store.getState()) // state的数据刷新 this.setState({}) }) } render() { return ( <div> <button onClick={() => {this.handleClick()}}>click me to post an action</button> <div>{store.getState().value}</div> </div> ); } handleClick = () => { // 调用方法获取action对象 const action=sendAction() // 发送action         store.dispatch(action) } }