Redux(二) -- react-redux的使用及其工作原理

前言：

之前我们说用redux可以方便的管理我们的数据，但是发布订阅的模式还是会有所不便，你还是需要在你们UI组件中编写订阅的函数。
React-Redux是Redux的官方React绑定库，它更加的简化了我们的redux内部操作，不需要我们再手动绑定订阅操作。

---

一、React-Redux 和 Redux在使用方式上的区别

（参考上一章例子大概写的，有不明白的地方还请往下看后面的完整代码。）

1.获取数据的对比

redux的获取数据，要使用getState( )并且还需要subscribe( )监听才能获取，后续更新也需要绑定事件然后setState（）更新

// 初始获取数据
const state = {
	const state=store.getState()
}
// 更新获取到的新数据
updateState = ()=>{
    this.setState(store.getState())
}

react-redux的获取数据只需要绑定UI组件上的state和store内部的state即可

// 编写一个mapStateToProps 函数，把UI组件上的state和store内部的state绑定
// 传入的参数state是由store传过来的reducer内定义的state
const mapStateToProps = (state) => ({
    state: state.xxxReducer
})
// 。。。后面还需要通过connect函数进行绑定才能使用

2.dispatch派发action对比

redux通过函数事件用dispatch派发action

increment = ()=>{
   	// dispatch派发action，参数由action_creator创建
  	store.dispatch(incrementAction())
}

react-redux的dispatch派发action同理，也是直接绑定

const mapDispatchToProps = (dispatch) => ({
  increment: ()=>dispatch(incrementAction())
})
// 简写形式
const mapDispatchToProps = {
  increment: ()=>incrementAction()
}
// 。。。后面还需要通过connect函数进行绑定才能使用

3.监听state的对比

redux通过subscribe函数监听store内的数据，之后才能有获取数据，不监听就啥也拿不到，还是比较麻烦的

store.subscribe(this.asyncState)

react-redux则是通过connect函数，把 state 和 dispatch 以及 ui 组件连接起来，不需要写订阅函数，十分方便

// 传入mapStateToProps（数据绑定），mapDispatchToProps（派发函数绑定）以及ui组件Counter
// connect需要传入两个参数，返回值是一个函数需要传入组件，最后在返回一个组件
const Container = connect(mapStateToProps,mapDispatchToProps)(Counter)

// connect 内部大概就是做一些这样的操作，这只是我脑子里大概的描述，不是源码
function connect(mapStateToProps,mapDispatchToProps){
    return (Component)=>{
      return class Container extends React.Component{
        constructor(props){
          this.store = props.store
        }
        { // 一些绑定的操作
          store => getState => state
              => dispatch
        	mapStateToProps
        	mapDispatchToProps
        }
        render(){
          return (
            <Component {...mapStateToProps} {...mapDispatchToProps}></Component>
          )
        }
      }
    }
}

4.react-redux的完整绑定数据流程

import React from 'react'
import store from './store'
import {incrementAction,decrementAction} from './store/action_creator'
import {connect, Provider} from 'react-redux';

// 01-定义UI组件
function Counter(props){
  const {value,increment,decrement} = props
  return (
    <div>
          Clicked : { value } times
          {' '}
          <button onClick={increment}>+</button>
          <button onClick={decrement}>-</button>
       </div>
  )
}

// 02-定义映射逻辑
// 它是一个函数，建立一个从（外部的）state对象到（UI组件的）props对象的映射关系
// mapStateToProps 执行后应返回一个对象，里面的每一个键值对就是一个映射
const mapStateToProps = state => ({
  value: state.count
})
// 将action映射到 UI组件 的 props里
// 建立了UI组件的属性到store.dispatch分发的action映射
// 可以是一个函数，也可以是一个对象
const mapDispatchToProps = dispatch => ({
  increment: ()=>dispatch(incrementAction()),
  decrement: ()=>dispatch(decrementAction())
})
// 简写
// const mapDispatchToProps = {
//   increment: ()=>incrementAction(),
//   decrement: ()=>decrementAction()
// }

// 03-定义容器组件
const Container = connect(mapStateToProps,mapDispatchToProps)(Counter)

class App extends React.Component {
  render() { 
    return (
      <div>
        <Provider store={store}>
          <Container />
        </Provider>
      </div>
    )
  }
}

二、React-Redux 的工作原理

React-Redux把所有的组件都拆分成了两大类：UI组件 和 容器组件

1.UI组件：

只负责UI的呈现，不带有任何业务逻辑
没有状态（即不适用this.state，或定义 state）
所有数据都由 props 提供
不使用任何 Redux 的API

2.容器组件

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

3.如何定义容器组件？

通过connect方法自动生成容器组件 对 UI组件的增强

connect接收两个参数：
（1）mapStateToProps：负责输入逻辑，即 把 state 映射到 UI组件的参数（props）
（2）mapDispatchToProps：负责输出逻辑，即 把用户对UI组件的操作 映射成 action

const Container = connect(mapStateToProps,mapDispatchToProps)(Counter)

4.当我们有多个reducer时，如何映射 state？

当我们使用combineReducers集成了多个reducer时

const reducer = combineReducers({
    reducerCounter,
    reducerStudentForm,
    reducerTask
})

这时，我们只需要计数器Counter的reducer，我们需要怎么映射：

const mapStateToProps = (state) => ({
  value: state.reducerCounter.count
})
// 或者 直接解构
const mapStateToProps = {reducerCounter} => ({
  value: reducerCounter.count
})

---

三、总结

react-redux 和 redux 的差别其实并不大，除了在数据绑定方面 react-redux 十分便捷外，剩下的内部的reducer，action_creator那些其实都是一样的，react-redux只是方便了我们在数据的绑定上，而我们还是需要理解好 redux 的 action 派发流程，这样才能学的更好。