Redux概述

本文详细介绍了Redux的状态管理框架,包括其三大核心原则:单一数据源、只读状态和纯函数更新。讲解了Redux的组成,如State、Action、Reducer和Store,并展示了创建和使用Store的流程。此外,还探讨了React-Redux的Provider和connect组件,解释了如何通过它们实现React组件与Redux Store的交互,以便在React应用中高效地管理状态。
摘要由CSDN通过智能技术生成

Redux概述

Redux是一个用于JavaScript状态容器,提供可预测化的状态管理
Redux可以构建一致化的应用,运行于不同的环境并且易于测试。

Redux三大核心

  • 单一数据源
    整个应用的state被存储在一个object tree中,并且这个object tree只存在于唯一一个store中。
    在这里插入图片描述

  • State是只读的
    唯一改变state的方法就是触发action,action是一个用于描述已发生事件的普通对象。

  • 使用纯函数来执行修改
    为了描述action如何改变state tree,需要编写reducers
    Reducers只是一个纯函数,它接收先前的state和action,并且返回新的state。可以复用,可以控制顺序,传入附加参数。

Redux组成

State状态

就是我们传送的数据。

Action事件

Action是把数据从应用传到store的载体,它是store数据的唯一来源,一般来说,我们可以通过store.dispatch()将action传递给store。
Action本质就是一个js对象,对象内部必须要有一个type属性来表示要执行的动作,多数情况下,type会被定义成字符串常量。但在项目中,更多会用action创建函数。
它只是描述了有事情要发生,并没有描述如何去更新state。
在这里插入图片描述

Reducer

Reducer本质就是一个函数,它用来响应发送过来的actions,经过处理,把state发送给Store。
在Reducer函数中,需要return返回值,这样Store才能接收到数据。
函数会接收两个参数,第一个参数是初始化state,第二个参数是action。
在这里插入图片描述

Store

Store就是把action与reducer联系到一起的对象
主要职责:

  • 维持应用的state
  • 提供getState()方法获取state
  • 提供dispatch()发送action
  • 通过subscribe()来注册监听
  • 通过subscribe()返回值来注销监听

流程

在这里插入图片描述

  • 创建action对象(需要包含type属性)
const sendAction = ()=> {
    return {
        type:'send',
        value:'我是一个action'
    }
}
  • 创建reducer处理(需要有返回值)
//创建reducer 纯函数 处理action
const initState = {
    value:'默认值'
}
const reducer = (state=initState.value,action)=> {
    //console.log('reducer:',state,action)
    switch (action.type) {
        case 'send':
            return action.value
        default:
            return state
    }
}
  • 通过createStore()构建store接收reducer
//构建store
const store = createStore(reducer)
export default store
  • 组件发送action对象
  • 通过store.subscribe()监听获取新的状态getState()
export default class Home extends Component {
    handle = ()=> {
        //发送action对象
        const action = sendAction()
        store.dispatch(action)
    }
    componentDidMount() {
        //监听获取新的状态
        store.subscribe(()=> {
            //console.log('sub',store.getState())
            this.setState({})
        })
    }

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

        )
    }
}

React-redux

react-redux是Redux官方给出的用于配合React的绑定库。
react-redux能够使React组件从Redux store中很方便的读取数据,并且向store中分发actions以此来更新数据。
react-redux有两个重要的组成部分:providerconnect

Provider

Provider包裹在根组件最外层,使所有的子组件都能够拿到State。
Provider接收store作为props,通过context往下传递,这样react中任何组件都可以通过context获取到store。

connect

Provider内部组件如果想要使用到state中的数据,就必须要connect进行一层包裹封装,要被connect进行加强。
connect就是方便我们组件能够获取到store中的state。

流程

在这里插入图片描述

发送方:

import React,{Component} from "react";
import {connect} from "react-redux";

//发送方
class Index extends Component {
    handle = ()=> {
        //拿到并发送action
        console.log(this.props)
        this.props.sendAction()
    }

    render() {
        return (
            <div>
                <button onClick={this.handle}>+</button>
            </div>
        );
    }
}

//函数必须有返回值
//通过connext将方法的返回值传递给内部
const map = dispatch=> {
    return {
        sendAction: () => {
            dispatch({
                type:'add'
            })
        }
    }
}

//connect第一个括号参数第一个是接收的 第二个是发送的
//第二个括号是加强的组件
export default connect(null,map)(Index)

reducer:

const init = {
    count: 0
}

const reducer = (state = init,action)=> {
    switch (action.type) {
        case 'add':
            return {
                count:state.count+1
            }
        default:
            return state
}}

export default reducer

store:

import reducer from "./reducer";
import {createStore} from "redux";

const store = createStore(reducer)
export default store

provider:

function App() {
  return (
    <Provider store={store}>
        <div className="App">
            <Index/>
            <Hom/>
        </div>
    </Provider>
  );
}

接收方:

import React,{Component} from "react";
import {connect} from "react-redux";

class Hom extends Component {
    render() {
        return (
            <div>
                {this.props.count}
            </div>
        )
    }
}

const map = (state)=> {
    console.log(state)
    return state
}
//接收到更新的state
export default connect(map)(Hom)

效果:
在这里插入图片描述
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值