Redux-CSDN博客

本文链接：https://blog.csdn.net/Ronychen/article/details/106299913

一、概述

1.1、概念理解：

redux可以理解为就是一个js容器，用于全局的状态管理

1.2、三大核心

单一数据源

整个应用的state被存储在一颗object tree中，并且这个object tree只存在于唯一一个store

在这里插入图片描述

state是只读的

唯一能改变state的就是action,action是一个用于描述已发生事件的对象,通过store中的dispatch方法来发送action
storte.dispatch({type:‘add’})

使用纯函数（reducer）来执行修改

reducer是一个纯函数，它接受先前的state，action，并且返回一个新的state

二、redux组成

2.1、state-状态

就是我们所说的传递的数据，我们在开发过程中，数据大致可以分为三类：服务器返回的数据、影响组件UI展示的状态、App级别的状态

2.2、action-事件

在这里插入图片描述
action特点：

action本质就是一个js的简单对象
该对象内部必须要有一个type属性来表示要执行的动作
多数情况下，这个type会被定义成字符串常量
实际项目中，我们更喜欢创建一个函数，比方说这个函数名叫做updateState，它返回一个action对象，用于更新store中的数据的，定义一个具有特定功能含义的函数
它只是描述了有事情要发生，但并没有描述如何去更新state

2.3、reducer

在这里插入图片描述

2.4、store

在这里插入图片描述

注意：通过createStore方法创建一个store，然后参数中要传入reducer

2.5、简单demo

demo最终效果：一个按钮，点击按钮，在按钮下方显示修改的value

1、单独建一个存放各种action的文件

const sendAction =()=>{
    return {
        type:'send',
        value:"我是action"
    }
};

module.exports = {
    sendAction
};

2、建一个reducer文件

const initState ={
    value:'默认值'
};

const reducer =(state=initState,action)=>{
    if (action.type === 'send') {
        return Object.assign({},state,action)
    } else {
        return state;
    }
};

module.exports={
    reducer
};

3、建一个store文件

import React from "react";
import {reducer} from '../reducer';
import {createStore } from 'redux';


const store =createStore(reducer);

export default store

4、组件文件

import React from "react";
import store from '../store'
import {sendAction} from '../action'

export default  class Home extends React.Component{

componentDidMount() {
    store.subscribe(()=>{
        console.log(store.getState(),'123');
        this.setState(store.getState())
    })
}

    click=()=>{
        const action =sendAction();
        store.dispatch(action);
    };

    render() {
        return(
            <div>
                <button onClick={this.click}>点我</button>
                <div>{store.getState().value}</div>
            </div>
        )
    }
}

三、总结

在这里插入图片描述

组件中导入store，因为要用store中的dispatch来发送action，然后发送了action后，在reducer中接受到了刚发过来的action，然后reducer是一个纯函数，他接受老的state和action，返回一个新的state,然后把新的state传递给store，那组件怎么知道store中的数据更新了呢？就通过subscribe（）去监听，只要调用subscribe（）了，就说明数据已经更新了，这时通过回调函数的方式来更新组件中的数据