zoukankan      html  css  js  c++  java
  • 8.3 react-redux 黑马

    1 问题。

    如果想要发送一个action,导入一个store。

    store.dispatch() -> reducer --> return -->store

    如果多个组件想要接受state。

    导入store。

    store.subscribe( ()=> (接受到返回的数据)) 监听到 才能拿到数据, store.getState()

    那么组件被销毁的时候,取消我的监听。

    2 react-redux概述:

    作用: 可以从redux store 很方便的读取数据,

    并且向store中分发actions以此来更新数据。

    组件驱动的! 1 provider 组件:可以让整个app 获取store的数据。(不需要一层一层传递 state,props一层曾传递

    2 connent方法: 组件和store 可以进行关联。

    Provider 包裹在根组件最外层,使所有子组件 都可以拿到State。

    provider 结束后道store,props,通过conetxt向下传递,任何组件通过context获取store。

    connect方法:

    Provider 内部组件state 的数据,必须要connect 进行包裹封装,connent进行加强。 

    connect 如果我们需要接受到Provider提供的store,就需要吧组件通过connect加强。方便获取store 的state。

    SOC高阶组件,with开头,组件包裹自身组件。

    实战:

    组件A -》 组件B

     左键的按钮,给右键+1.

    yarn add react-redux

    yarn add redux. //redux依赖于 Redux的store

    Provider组件。

    1 app.js导入provider组件。

    2 Provbider组件进行包裹,并且传递store。 <Provider store={store}></Provider>

    3 function

    connent-使用:只有呗connect加强过的,才能

    1 导入connet方法:

    2 调用connect  。connect(...)(Component)    第一个一定是返回函数,这样第二个参数才被调用。

    返回的是加强后的组件。

    mapStateToProps(state,ownProps)   store数据,作为props足尖上。 state redux的store,ownProps:自己的

    mapDispatchToProps(dispatch,ownProps) :action 作为props绑定到我们的自己函数。dispatch

    (要接受的组件的函数,发送action函数)(放入要加强的组件)

    我们需要实现connect第二参数。dispatch:发送ation。

    组件的内容,通过this.props拿到这个方法。

    A组件发送,B组件接受。

  • 相关阅读:
    物理CPU,物理核,逻辑CPU,虚拟CPU(vCPU)区别 (转)
    JVM学习一:常用JVM配置参数
    docker架构
    Linux查看服务器配置
    redis清缓存
    httpclient源码分析之 PoolingHttpClientConnectionManager 获取连接 (转)
    CentOs7.6配置邮件服务并发送邮件
    linux之dmesg命令
    docker部署springboot项目
    如何查看文件是dos格式还是unix格式的?
  • 原文地址:https://www.cnblogs.com/hacker-caomei/p/14395673.html
Copyright © 2011-2022 走看看