第12章：react-redux

第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(
    
        
    ,
    rootElement
)

1
2
3
4
5
6
7
8
9
10
11
12
13
14

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)

1
2
3
4
5
6
7
8
9
10
11
12
13

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 
loading...
            }
            return 
        }
    }
}

class MyComponent extends React.Component {
    render() {
        return 
{this.props.data}
    }
}

// 高阶组件
export default Control(MyComponent);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Parent.js
import MyControlComponent from "./Child"


// 在父级传入 data 是 null 的时候, 这一块儿就只会显示 loading...
// 不会显示组件的具体内容, 如果 data 不为 null, 就显示真实组件信息

1
2
3
4
5
6
7

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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 改造根组件 
import {persistor} from './Store' 
import {PersistGate} from 'redux-persist/lib/integration/react'; 
 ... 
1
2
3
4