一、概述

什么是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)
    }
}

Redux的介绍、安装及基本使用