相关基础代码讲解请看往期文章
容器组件
方式一
javascript
//引入之前改造的UI组件
import CountUI from './count'
//引入store
import store from '../redux/store'
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
//映射状态
const mapStateToProps = state => {( count：state )}}
//映射状态方法
const mapDispatchToProps = dispatch => (
{
jia：(number)=>{ dispatch(createIncrementAction(number)) },
jian：(number)=>{ dispatch(createDecrementAction(number)) },
jiaAsync：(number,time)=>{ dispatch(createIncrementAsyncAction(number,time)) },
}
)
//使用connect()()创建并暴露一个Count的容器组件
export default connect(mapStateToProps,mapDispatchToProps)(CountUI)方式二
javascript
//引入之前改造的UI组件
import CountUI from './count'
//引入store
import store from '../redux/store'
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
export default connect(
state => {( count：state )}},
dispatch => (
{
jia：(number)=>{ dispatch(createIncrementAction(number)) },
jian：(number)=>{ dispatch(createDecrementAction(number)) },
jiaAsync：(number,time)=>{ dispatch(createIncrementAsyncAction(number,time)) },
}
)
)(CountUI)方式三
react-redux的自动分发，不需要手动dispatch
javascript
//引入之前改造的UI组件
import CountUI from './count'
//引入store
import store from '../redux/store'
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
export default connect(
state => {( count：state )}},
{
jia：createIncrementAction,
jian：createDecrementAction,
jiaAsync：createIncrementAsyncAction,
}
)(CountUI)mapDispatchToProps不仅可以是方法，也可以是对象
监听变化更新render
在上期文章使用redux依赖时，我们在index.js文件中有
javascript
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
store.subscribe(()=>{
ReactDOM.render(<App />,document.getElementById('root'))
})检测redux中状态的变化，只要变化，就会调用render
而使用react-redux时，就不需要继续监听了，而是交给了connect
给容器传递store
在redux中会有这样的烦恼
javascript
import React,{ Component } from 'react'
import Count from './containers/Count'
import Count2 from './containers/Count2'
import Count3 from './containers/Count3'
import store from './redux/store'
export default class App extends Component {
reder(){
return (
<div>
<Count store = { store }/>
<Count2 store = { store }/>
<Count3 store = { store }/>
</div>
)
}
}而在react-redux中只需要在index.js文件中这样设置就行，不需要再一个个的给容器组件传递store
javascript
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
import { Provider } from 'react-redux'
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>,
document.getElementById('root'))整合容器组件和UI组件
之前我们分别将容器组件和UI组件写在了不同的文件中，那么它们能不能写在同一个文件中，这样就更方便管理了。
容器组件
javascript
//引入之前改造的UI组件
import CountUI from './count'
//引入store
import store from '../redux/store'
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
export default connect(
state => {( count：state )}},
{
jia：createIncrementAction,
jian：createDecrementAction,
jiaAsync：createIncrementAsyncAction,
}
)(CountUI)UI组件
javascript
import { React，{ Component } } from 'react'
export default class Count extends Component {
state= {
car:'0'
}
increment = () => {
const { value } = this.selectNumber
}
decrement = () => {
const { value } = this.selectNumber
}
incrementIfOdd =() => {
const { value } = this.selectNumber
}
incrementAsync = () => {
const { value } = this.selectNumber
}
render(
<div>
<h1>当前求和为：</h1>
<select ref={ c => this.selectNumber = c }>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick = { this.increment }>+</button>
<button onClick = { this.decrement }>-</button>
<button onClick = { this.incrementIfOdd }>当前求和为奇数再加</button>
<button onClick = { this.incrementAsync }>异步加</button>
</div>
)
}整合代码
以容器组件为基，整合UI组件
javascript
import { React，{ Component } } from 'react'
//引入store
import store from '../redux/store'
//引入createIncrementAction、createDecrementAction、createIncrementAsyncAction
。。。。。
//引入connect用于连接UI组件与redux
import { connect } from 'react-redux'
class Count extends Component {
state= {
car:'0'
}
increment = () => {
const { value } = this.selectNumber
}
decrement = () => {
const { value } = this.selectNumber
}
incrementIfOdd =() => {
const { value } = this.selectNumber
}
incrementAsync = () => {
const { value } = this.selectNumber
}
render(
<div>
<h1>当前求和为：</h1>
<select ref={ c => this.selectNumber = c }>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button onClick = { this.increment }>+</button>
<button onClick = { this.decrement }>-</button>
<button onClick = { this.incrementIfOdd }>当前求和为奇数再加</button>
<button onClick = { this.incrementAsync }>异步加</button>
</div>
)
}
export default connect(
state => {( count：state )}},
{
jia：createIncrementAction,
jian：createDecrementAction,
jiaAsync：createIncrementAsyncAction,
}
)(Count)根据案例总结react-redux优化
1、容器组件可以和UI组件整合为一个文件
2、无需自己给容器组件传递store，给</App>包裹一个<Provider store={ store }>即可
3、使用了react-redux后不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作
4、mapDispatchProps也可以简单写成为一个对象
5、一个组件要和redux"打交道"要经过哪几步？
1）定义好UI组件---不暴露
2）引入connect生成一个容器组件，并暴露，写法如下
javascript
connect(
state => ({ key:value }),//映射状态
{ key：xxxAction }//映射方法
)3）在UI组件中通过this.props.xxxx读取和操作状态