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组件接受。

  • 相关阅读:
    【VUE3.0体验】关于路由的一些坑
    TensorFlow中的卷积函数
    TensorFlow源码安装
    ubuntu远程桌面
    TensorFlow图像处理API
    C程序员眼里的Python
    深度剖析HashMap的数据存储实现原理(看完必懂篇)
    golang 互斥锁和读写锁
    golang goroutine的调度
    golang channel的使用以及调度原理
  • 原文地址:https://www.cnblogs.com/hacker-caomei/p/14395673.html
Copyright © 2011-2022 走看看