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

短命女 2023-02-17 11:03 22阅读 0赞

# 一、概述 #

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

--------------------