基础流程
1.UI组件Example,只接收this.props数据,包含reducer出来的数据state,
以及dispatch要领.
2.容器组件
const store = createStore(reducer);
经由过程mapStateToProps将reducer返回的state作为this.props传入.
经由过程mapDispatchToProps将action作为this.props传入.
经由过程connect要领将这两个要领与Example组件连接起来,返回一个容器组件.
import React, { Component } from 'react';
import { render } from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
import reducer from '../reducers/reducer6.js';
import { addAction, delAction } from '../actions/action2.js';
import Example from '../components/Example5.js';
const store = createStore(reducer);
function mapStateToProps(state) {
return {
count: state.count
};
}
function mapDispatchToprops(dispatch) {
return {
add: () => dispatch(addAction()),
del: () => dispatch(delAction())
};
}
const App = connect(mapStateToProps, mapDispatchToprops)(Example)
render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);import React, { Component } from 'react';
class Example extends Component {
render() {
const { count, add, del } = this.props;
return (
<div>
<p>count: { count }</p>
<p><button onClick={ add }>add</button></p>
<p><button onClick={ del }>del</button></p>
</div>
);
}
}
export default Example;UI组件
1.React-Redux将一切组件分红两大类:UI组件和容器组件.
2.UI组件有以下几个特性:
import React, { Component } from 'react';
class Counter extends Component {
render() {
const { value, onIncreaseClick } = this.props;
return (
<div>
<span>{ value }</span>
<button onClick={ onIncreaseClick }>Increase</button>
</div>
);
}
}
export default Counter;1.只担任UI的显现,不带有任何营业逻辑
2.没有状况(即不运用this.state这个变量)
3.一切数据都由参数(this.props)供应
4.不实用任何redux的API由于不含有状况,UI组件又被称为’纯组件’,即它跟纯函数一样,地道由参数决议它的值.
容器组件
// 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);容器组件的特性恰恰相反
1.担任治理数据和营业逻辑,不担任UI的显现
2.带有内部状况
3.运用redux的APIUI组件担任UI的显现,容器组件担任治理数据和逻辑.
react-redux划定,一切的UI组件都由用户供应,容器组件则是由react-redux自动天生,也就是说,
用户担任视觉层,状况治理则是悉数交给它.
connect()
react-redux供应connect要领,用于从UI组件天生容器组件.
connect的意义,就是将这两种组件连起来.
const App = connect(mapStateToProps, mapDispatchToProps)(Counter);
Counter是UI组件,App就是由React-Redux经由过程connect要领自动天生的容器组件.
然则,由于没有定义营业逻辑,上面这个容器组件毫无意义,只是Ui组件的一个纯真的包装层.
为了定义营业逻辑,须要给出下面两方面的信息.
1.输入逻辑:外部的数据(即state对象)如何转化为UI组件的参数.
2.输出逻辑:用户发出的行动如何变成Action对象,从UI组件传出去connect要领接收两个参数:mapStateToProps和mapDispatchToProps,他们定义了UI组件的营业逻辑,
前者担任输入逻辑,行将state映照到Ui组件的参数(props),后者担任输出逻辑,行将用户对UI组件的操纵映照成Action.
mapStateToProps()
mapStateToProps是一个函数,它的作用就是像它的名字那样,竖立一个从(外部的)state对象到(Ui组件的)props对象的映照关联.
作为函数,mapStateToProps实行后应当返回一个对象,内里的每一个键值对就是一个映照.
mapStateToProps会定阅store,每当state更新的时刻,就会自动实行,从新盘算UI组件的参数,从而
触发UI组件的从新衬着.
mapStateToProps的第一个参数是state对象.
mapDispatchToProps
mapDispatchToProps是connect函数的第二个参数,用来竖立UI组件的参数到store.dispatch要领的映照,
也就是说,他定义了哪些用户的操纵应当看成Action,传给Store,它可所以一个函数,也可所以一个对象.
假如mapDispatchToProps是一个函数,会获得dispatch和ownProps(容器组件的props对象)两个参数.
作为函数,应当返回一个对象,该对象的每一个键值对都是一个映照,定义了UI组件的参数如何发出Action.
<Provider>组件
connect要领天生容器组件今后,须要让容器组件拿到state对象,才天生UI组件的参数.
react-redux供应Provider组件,能够让容器组件拿到state.
Provider在根组件表面包了一层,如许一来,App的一切子组件就默许都能够拿到state了.
它的道理是React组件的context属性.
react-redux自动天生的容器组件的代码,就相似上面如许,从而拿到store.
render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root')
);React-Router路由库
运用React-Router的项目,与其他项目也没有不同之处,也是运用Provider在Router表面包一层,毕竟Provider的唯一功用就是传入store对象.
const root = ({ store }) => (
<Provider store={ store }>
<Router>
<Route path="/" component={ App }>
</Router>
</Provider>
);
