Redux

一、概述

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({})
    })
}

    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()了,就说明数据已经更新了,这时通过回调函数的方式来更新组件中的数据

以上就是redux的相关简单概念和基础用法,最后讲一下它的缺点,在组件中要单独引入store文件,然后才能发送action的这种的方式比较麻烦,下一篇我会讲一下react-redux

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读