第12章：react-redux

介绍

容器组件与 UI 组件

UI 组件

只负责 UI 的呈现, 不带有任何业务逻辑
没有状态(即不使用 this.state 这个变量)
所有数据都由参数( this.props )提供
不使用任何 Redux 的 API

容器组件

负责管理数据和业务逻辑, 不负责 UI 的呈现
带有内部状态
使用 Redux 的 API

Provider 与 connect

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
)

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)

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

connect 是 HOC, 高阶组件
Provider 组件, 可以让容器组件拿到 state, 使用了 context

高阶组件构建与应用

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

代码复用, 代码模块化
增删改 props
渲染劫持

// 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, 就显示真实组件信息

Redux 持久化

import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';const persistConfig = {key: 'kerwin', storage: storage,// localStorage: import storage from 'redux-persist/lib/storage'// sessionStorage: import storageSession from 'redux-persist/lib/storage/session'stateReconciler: autoMergeLevel2// 控制在本地存储中, 新老状态怎么合并, 覆盖？或者合并？
};
// 改造 reducer
const myPersistReducer = persistReducer(persistConfig, reducer)
// 改造 store
export const persistor = persistStore(store)

// 改造根组件
import {persistor} from './Store'
import {PersistGate} from 'redux-persist/lib/integration/react';
<PersistGate loading={null} persistor={persistor}> ... </PersistGate>

第12章：react-redux相关推荐

React Redux: 从文档看源码 - Components篇
注:这篇文章只是讲解React Redux这一层,并不包含Redux部分.Redux有计划去学习,等以后学习了Redux源码以后再做分析注:代码基于现在(2016.12.29)React Redux ...
React+Redux仿Web追书神器
引言由于 10 月份做的 React Native 项目没有使用到 Redux 等库,写了一段时间想深入学习 React,有个想法想做个 demo 练手下,那时候其实还没想好要做哪一个类型的,也看了 ...
React + Redux
相当长一段时间以来,我一直在React和Redux中实现应用程序.在过去的几年里,我写了两本关于它的电子书,并发布了学习React及其生态系统的课程平台.课程平台甚至内置在React和Redux中.我 ...
webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
一个 react+redux 工程实例
在前几天的一篇文章中总结部分提到了学习过程中基础的重要性.当然,并不是不支持大家学习新的框架,这篇文章就分享一下react+redux工程实例. 一直在学习研究react.js,前前后后做了几次分享. ...
[OHIF-Viewers]医疗数字阅片-医学影像-React/Redux 的好帮手Classnames
我曾经看到一篇文章说,其实现在的单页面应用已经有向feature-flag编程发展的倾向了.什么意思呢? 和鸿门宴一样,项羽设局为了杀刘邦,在大厅后面埋伏了刀斧手,这些刀斧手是否行动要等主人的指令,指 ...
React + Redux + Express + Mongodb 零基础开发完整大型商城网站视频教程（97 个视频）
React + Redux + Express + Mongodb 零基础开发完整大型商城网站视频教程(97 个视频) mern 架构零基础开发完整电商网站 React + Redux + Expre ...
使用react+redux+react-redux+react-router+axios+scss技术栈从0到1开发一个applist应用
先看效果图 github地址 github仓库在线访问初始化项目 #创建项目 create-react-app applist #如果没有安装create-react-app的话,先安装 npm ...
React Redux 与胖虎
这是一篇详尽的 React Redux 扫盲文. 对 React Redux 已经比较熟悉的同学可以直接看 <React Redux 与胖虎他妈>. 是什么 React Redux 是 R ...

第12章：react-redux

第12章：react-redux

介绍

容器组件与 UI 组件

UI 组件

容器组件

Provider 与 connect

React-Redux 提供 Provider 组件, 可以让容器组件拿到 state

React-Redux 提供 connect 方法, 用于从 UI 组件生成容器组件

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

高阶组件构建与应用

Redux 持久化

第12章：react-redux相关推荐

最新文章

热门文章