React全家桶React-Redux Posted 2023-03-29 糖^O^
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 方法
store.getState()返回应用当前的 state 树 与 store 的最后一个 reducer 返回值相同
✨✨✨store.dispatch(action)分发 action,这是触发 state 变化的唯一途径
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 mapStateToProps = ( state ) =>
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) 渲染劫持
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) ;
import MyControlComponent from "./Child"
< MyControlComponent data= this . state. value/ >
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
这样就安装成功了。
至于具体的原因尚不了解。
以上是关于React全家桶React-Redux的主要内容,如果未能解决你的问题,请参考以下文章
简述React全家桶,Dva,Umi的理解
ReactReact全家桶React脚手架
react基础---react全家桶03
React全家桶React生命周期
react全家桶从0搭建一个完整的react项目(react-router4reduxredux-saga)
React全家桶react简介