地址栏
Redux（异步操作/中间件）二
React状态管理（Redux同步处理）一

redux在react中的使用（react-redux）

如何在react中使用redux，作者封装了一个React专用库react-redux。

react-redux

react-redux中的 组件分为两种，UI组件、容器组件

UI组件

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。

UI 组件有以下几个特征。

  • 只负责UI的呈现，不带有任何业务逻辑
  • 没有状态（即不使用this.state这个变量）
  • 所有数据都由参数（this.props）提供
  • 不使用任何 Redux的 API

下面就是一个UI组件的例子。

const Title =
value => <h1>{
    value}</h1>;

因为不含有状态，UI 组件又称为"纯组件"，即它纯函数一样，纯粹由参数决定它的值。

容器组件

容器组件的特征恰恰相反。

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

总之，只要记住一句话就可以了：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

你可能会问，如果一个组件既有 UI 又有业务逻辑，那怎么办？回答是，将它拆分成下面的结构：外面是一个容器组件，里面包了一个UI 组件。前者负责与外部的通信，将数据传给后者，由后者渲染出视图。

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。

connect()

React-Redux 提供connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

import {
     connect } from 'react-redux'
const VisibleTodoList = connect()(TodoList);

上面代码中，TodoList是 UI 组件，VisibleTodoList就是由 React-Redux 通过connect方法自动生成的容器组件。

但是，因为没有定义业务逻辑，上面这个容器组件毫无意义，只是 UI 组件的一个单纯的包装层。为了定义业务逻辑，需要给出下面两方面的信息。

（1）输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数

（2）输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。

因此，connect方法的完整 API 如下。

import {
     connect } from 'react-redux'

const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)

上面代码中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

  • 安装

cnpm install react-redux --save

  • 概念
    • Provider组件：自动将store中的state和组件进行关联。
    • MapStateToProps：将store中的state映射到组件的props中。实现了数据的共享。
    • MapDispatchProps：将store中的dispatch映射到组件的props中。实现方法的共享。
    • Connect方法：将组件和数据及方法进行链接 
class Counter extends React.Component{
   
  constructor(props){
   
    super(props)
  }

  render(){
   
    //通过store的state传给props，直接通过props就可以获取。
    const value = this.props.value;
    const onAddClick = this.props.onAddClick
    return(
      <div>
        <h1>计数器:{
   value}</h1>
        <button onClick={
   onAddClick}>数字+1</button>
      </div>
    )
  }
}

const addAction = {
   
  type:'add'
}

function reducer(state={
   num:0},action){
   
  switch(action.type){
   
    case 'add':
      state.num++
      console.log(state.num)
      break;
    default:
      break;
  }
  return {
   ...state}
}

const store = createStore(reducer)

//将state映射到props函数中
function mapStateToProps(state){
   
  return{
   
    value:state.num
  }
}
//将修改state数据的方法，映射到props
function mapDispatchToProps(dispatch){
   
  return{
   
    onAddClick:() => {
   dispatch(addAction)}
  }
}

//将上述2个方法，将数据仓库的state和修改的state的方法映射到UI组件上，形成新的容器组件。
const Bpp = connect(mapStateToProps,mapDispatchToProps)(Counter)

ReactDOM.render(
  //provider:自动将store里的state和组件中进行关联。
  <Provider store={
   store}><Bpp></Bpp></Provider>,
  document.getElementById('root')
);

小结

react-redux，是redux的升级版，被封装过的。操作起来会相对Redux方便一些。