Redux(三):React-Redux的基本原理

2016-12-05

使用React-Redux

React-Redux提供了两个概念

概念	作用
Provider	作为最顶层的Component以便可以传递数据到任一个Component
Connect	用于减少代码量，让代码变得好看Grace

React-Redux的核心思想以及节省了哪些代码

React-Redux的核心思想就是

通过Provider作为所有Component的父节点以便访问所有Component
使用Connect方法把Redux的数据State和逻辑Action都变成当前Component的Props以便调用

那节省了哪些代码呢？节省了复杂的通道层来传递Redux的State和Action

Provider

首先我们要先把 Provider 这个标签作为顶层标签， 因为React的单向数据流，组建间通讯必须找到共同的父亲Component，那么如果Redux想和任意一个Component通信，那么必须把Provider作为所有标签的父亲

import {Provider} from "react-redux";        //从React-Redux引入的
import {createStore} from "redux";           //从Redux引入的
import reducer from "./redux/configReducer"; //引入用于初始化的reducer

//初始化Store
const store = createStore(reducer);

//把从React-Redux引入的Provider作为顶级父Component，并且传入初始化的store
ReactDOM.render(
    (
        <Provider store={store}>
              .......
        </Provider>
    ),
    document.body.appendChild(document.createElement("div"))
);

Connect

在准备好了Provider和Store之后，我们可以使用Connect方法在任意一个层级的Component进行操作,注意Connect方法也是从React-Redux导入的

import {connect} from "react-redux"

class MyComp extends Component {
  // content...
}

const Comp = connect(...args)(MyComp);

首先祭出Redux的官方文档对Connect的描述，然后基本知识请去看淘宝的技术文档，我这里只做简单解说

1	connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect() 接收四个参数，它们分别是 mapStateToProps，mapDispatchToProps，mergeProps和options。其中最主要的是 mapStateToProps 和 mapDispatchToProps ，后两个是生命周期中一些阶段，进阶学习时才需要，请参考官方文档。

名称	参数	译名
mapStateToProps	(state, ownProps)	映射Redux的Store中的State数据到当前Component的Props
mapDispatchToProps	(dispatch, ownProps)	映射某个Action，让Redux的Dispatch方法到当前Component的Props并且调用

mapStateToProps

其两个参数分别代表当前状态

state: 当前Redux的Store内的State数据
ownProps: 当前Component的props内容

在进行逻辑操作之后的返回值，会在经过 mergeProps 生命周期后，重新赋值给当前Component的Props

//把Redux内部的数据State变成Component的Props
const mapStateToProps = (state, ownProps) => {
  return {
    count: state.count + ownProps.count
  }
}

mapDispatchToProps

其两个参数分别代表当前状态

dispatch: 当前Redux的Store.dispatch对象，可以发送消息
ownProps: 当前Component的props内容

在进行逻辑操作之后的返回值，会在经过 mergeProps 生命周期后，重新赋值给当前Component的Props

//从外部载入Redux要触发的action
import actions from "../../actions.jsx"

//把Redux要触发的action放到dispatch里变成Component的Props
const mapDispatchToProps = (dispatch, ownProps) => {
  let actionObject1 = actions.increase(...args);
  let actionObject2 = actions.decrease(...args);

  return {
    increase: ()=>(dispatch(actionObject1)),
    decrease: ()=>(dispatch(actionObject2))
  }

React-Redux节省代码示例

假如我们要在某个Component里使用Redux的Action

class Comp extends Component{

      doSomething = ()=>{
        this.props.onIncrease()
      }
}

export default Comp

使用React-Redux前

//使用前
class App extends Component{

  render(){
    return <Comp state={this.state}
                 onIncrease={()=>store.dispatch(actions.increase())}  <==通道层
                 onDecrease={()=>store.dispatch(actions.decrease())}  <==通道层
    />
  }
}

使用React-Redux后,首先在Comp文件里加上Connect

class Comp extends Component{
      doSomething = ()=>{
        this.props.onIncrease()
      }
}


const mapStateToProps = (state, ownProps) => {
  return state
}

const mapDispatchToProps = (dispatch, ownProps) => {
  actionObject = actions.increase();
  return {
    increase: dispatch(actionObject),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Comp)

然后去看App层

//使用后
class App extends Component{

  render(){
    return <Comp />
  }
}

复杂的通道层被省去了。。。显得清爽多了，并且达到了直接和Component通信的效果