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

原文地址:https://www.cnblogs.com/hacker-caomei/p/14395673.html