React全家桶React-Redux

Posted 糖^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 方法

  • 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 

这样就安装成功了。

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

以上是关于React全家桶React-Redux的主要内容,如果未能解决你的问题,请参考以下文章

简述React全家桶,Dva,Umi的理解

ReactReact全家桶React脚手架

react基础---react全家桶03

React全家桶React生命周期

react全家桶从0搭建一个完整的react项目(react-router4reduxredux-saga)

React全家桶react简介