react-redux 入门

react-redux
流程
定义UI组件
用connect生成容器组件，并传入mapStateToProps和mapDispatchToProps
mapStateToProps是输入，将全局state传入到UI组件，并映射到props中，以便使用
mapDispatchToProps是输出，定义actions,并用dispatch去更改全局state
action是一个对象，用传入到dispatch中
然后会传入到reducer,由reduer逻辑处理，改变state
实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import React, { Component } from ‘react’
import PropTypes from ‘prop-types’
import ReactDOM from ‘react-dom’
import { createStore } from ‘redux’
import { Provider, connect } from ‘react-redux’

// React component
class Counter extends Component {
render() {
const { value, onIncreaseClick } = this.props
return (

{value}
Increase

)
}
}

Counter.propTypes = {
value: PropTypes.number.isRequired,
onIncreaseClick: PropTypes.func.isRequired
}

// Action
const increaseAction = { type: ‘increase’ }

// Reducer
function counter(state = { count: 0 }, action) {
const count = state.count
switch (action.type) {
case ‘increase’:
return { count: count + 1 }
default:
return state
}
}

// Store
const store = createStore(counter)

// Map Redux state to component props
function mapStateToProps(state) {
return {
value: state.count
}
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
return {
onIncreaseClick: () => dispatch(increaseAction)
}
}

// Connected Component
const App = connect(
mapStateToProps,
mapDispatchToProps
)(Counter)

ReactDOM.render(


,
document.getElementById(‘root’)
)