【React全家桶】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 }
export default connect(
mapStateToProps,
mapDispatchToProps
)(Counter)

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

👉 connect 是HOC， 高阶组件

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

7.高阶组件构建与应用

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

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

(2)增删改props

(3) 渲染劫持

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