React全家桶React-Redux

Posted 2023-03-29 糖^O^

react-redux

• • • • • 1. redux 介绍
        • 2.redux的核心
        • 3.redux 核心API
        • 4.容器组件与UI组件
        • 5.Provider与connect
        • 6. HOC与context通信在react-redux底层中的应用
        • 7.高阶组件构建与应用

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

react-redux安装失败的问题

刚试写了一个react的项目，为了体验一下react全家桶使用了 redux，但是redux想要配合react使用还需要 react-redux。

安装命令： npm install react-redux --save 

但是在安装react-redux的时候遇到了一个问题，安装失败,报错如下

npm ERR! cb() never called!

npm ERR! This is an error with npm itself. Please report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\AppData\Roaming\npm-cache_logs\2018-01-03T03_19_40_198Z-debug.log
Error: fatal error!

然后google了好久也没找到确切的答案，最后怒从心头起，恶向胆边生，直接在package.json的dependencies字段里面手动加了这个 "react-redux": "^5" 然后执行 npm install 

这样就安装成功了。

至于具体的原因尚不了解。