【React全家桶】React-Redux

时间:2022-12-26 01:09:29

安装: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, 就显示真实组件信息。