【React全家桶】React-Redux

react-redux

安装：react-dedux

npm install --save react-redux
或
cnpm install --save react-redux
或
yarn add react-redux

1. redux 介绍

👉👉👉
React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux
store中读取数据，并且向store分发actions以更新数据。

• redux是一个专门用于做状态管理的JS库(不是react插件库)。
• 可以用在react, angular, vue等项目中, 但基本与react配合使用。
• 作用: 可以帮助开发者做集中式状态管理，集中式管理react应用中多个组件共享的状态。
• redux是独立于所有组件存在的，把组件们需要用的公共部分交给redux，仅仅组件自用的对象和属性可以保留

redux使用

• 一个状态多个组件使用，多个组件可以随时拿到（共享）
• 一个组件需要改变另一个组件的状态（通信）
• 能不使用就不使用, 状态共享使用不方便时考虑使用

2.redux的核心

🎞️🎞️🎞️redux有三个核心概念：

①

action

：是动作的对象，包含2个属性

type：标识属性, 值为字符串, 唯一, 必要属性
data：数据属性, 值类型任意, 可选属性

②

reducer

：用于初始化状态、加工状态。

加工时，根据旧的state和action， 产生新的state的纯函数

③

store

：将state、action、reducer联系在一起的对象，它内部维护着：state、reducer

得到此对象的方法：

import{createStore}from'redux'import reducer from'./reducers'const store =createStore(reducer)

此对象的功能：

getState(): 得到state
dispatch(action): 分发action, 触发reducer调用, 产生新的state
subscribe(listener): 注册监听，订阅，当产生了新的state时, 自动调用

3.redux 核心API

①

createStore()

创建一个 Redux store 来以存放应用中所有的 state。应用中应有且仅有一个 store。

②

Store

用来维持应用所有的 state 树 的一个对象。 改变 store 内 state 的惟一途径是对它 dispatch 一个 action。

Store 不是类，它只是有几个方法的对象。 要创建它，只需要把根部的 reducing 函数传递给 createStore。

（1） Store 方法

• getState()

store.getState()返回应用当前的 state 树
与 store 的最后一个 reducer 返回值相同

• dispatch(action)

✨✨✨store.dispatch(action)分发 action，这是触发 state 变化的唯一途径

• subscribe(listener)

store.subscribe(() => { });添加一个变化监听器

每当 dispatch action 的时候就会执行，state 树中的一部分可能已经变化。可以在回调函数里调用 getState() 来拿到当前 state

4.容器组件与UI组件

（1）UI组件

• 只负责 UI 的呈现，不带有任何业务逻辑
• 没有状态（即不使用this.state这个变量）
• 所有数据都由参数（this.props）提供
• 不使用任何 Redux 的 API

(2) 容器组件

• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态
• 使用 Redux 的 API

5.Provider与connect

（1）React-Redux 提供Provider组件，可以让容器组件拿到state

import React from'react'import ReactDOM from'react-dom'import{ Provider }from'react-redux'import store from'./store'import App from'./App'const rootElement = document.getElementById('root')
ReactDOM.render(<Provider store={store}><App /></Provider>,
rootElement
)

（2）React-Redux 提供connect方法，用于从 UI 组件生成容器组件

import{ connect }from'react-redux'import{ increment, decrement, reset }from'./actionCreators'// const Counter = ...const mapStateToProps =(state /*, ownProps*/)=>{return{counter: state.counter
}}const mapDispatchToProps ={ increment, decrement, reset }exportdefaultconnect(
mapStateToProps,
mapDispatchToProps
)(Counter)

6. HOC与context通信在react-redux底层中的应用

👉 connect 是HOC， 高阶组件

👉 Provider组件，可以让容器组件拿到state ， 使用了context

7.高阶组件构建与应用

HOC不仅仅是一个方法，确切说应该是一个组件工厂，获取低阶组件，生成高阶组件

(1)代码复用，代码模块化

(2)增删改props

(3) 渲染劫持

// Child.js//高阶函数functionControl(wrappedComponent){returnclassMyControlextendsReact.Component{render(){if(!this.props.data){return<div>loading...</div>}return<wrappedComponent {...props}/>}}}classMyComponentextendsReact.Component{render(){return<div>{this.props.data}</div>}}exportdefaultControl(MyComponent);//高阶组件//Parent.jsimport MyControlComponent from"./Child"<MyControlComponent data={this.state.value}/>//在父级传入data是null的时候，这一块儿就只会显示loading...,//不会显示组件的具体内容，如果data不为null, 就显示真实组件信息。