redux（三）02-商品条目组件获取store数据-返回值会把数据提供给组件的props & 视图组件处理事件-将action进行分发

商品条目组件获取store数据-返回值会把数据提供给组件的props & 视图组件处理事件-将action进行分发

商品条目组件获取store数据

import { connect } from 'react-redux'

// 参数一：表示唯一的数据源store
// 参数二：表示组件的所有属性
function mapStateToProps (state, ownProps) {
  let num = state[ownProps.pname]
  // 该函数的返回值会把数据提供给组件的props
  return {
    num: num
  }
}

export default connect(mapStateToProps)(Item)

视图组件处理事件

let { handleSub, handleAdd, pname, num } = this.props

<div>
  <span>【{pname}】商品的数量是【{num}】</span>
  <button onClick={handleSub}>-</button>
  <button onClick={handleAdd}>+</button>
</div>

function mapDispachToProps(dispatch, ownProps) {
  return {
    increment: () => {
      // 发送action,先生成Action对象：
      let inAction = Actions.increment(ownProps.pname);
      // inAction实际上是对象{type:'increment':pname:'first'}
      dispatch(inAction);
    },
    decrement: () => {
      // 发送action
      let deAction = Actions.decrement(ownProps.pname);
      // inAction实际上是对象{type:'decrement':pname:'first'}
      dispatch(deAction);
    }
  }
}

实例

新建文件src/views/Item.js

/*
  商品列表组件
*/
import React from 'react'
import { connect } from 'react-redux'
// 导入创建Action的相关方法
import * as Actions from '../Actions.js'

// 傻瓜组件
function Item (props) {
  let { pname, num, handleSub, handleAdd } = props
  return (
    <div>
      <span>【{pname}】商品数量数据是【{num}】</span>
      <button onClick={handleSub}>-</button>
      <button onClick={handleAdd}>+</button>
    </div>
  )
}

// class Item extends React.Component {
//   // constructor (props) {
//   //   super(props)
//   //   this.state = {
//   //     num: 0
//   //   }
//   // }

//   // handleAdd = () => {
//   //   // 控制数据添加
//   //   this.setState({
//   //     num: this.state.num + 1
//   //   })
//   //   // 触发父组件中总数的修改
//   //   this.props.handleTotal(1)
//   // }

//   // handleSub = () => {
//   //   // 控制数据减少
//   //   let { num } = this.state
//   //   if (num > 1) {
//   //     this.setState({
//   //       num: num - 1
//   //     })
//   //     // 触发父组件中总数的修改
//   //     this.props.handleTotal(-1)
//   //   }
//   // }

//   render () {
//     let { pname, num, handleAdd, handleSub } = this.props
//     return (
//       <div>
//         <span>【{pname}】商品数量数据是【{num}】</span>
//         <button onClick={handleSub}>-</button>
//         <button onClick={handleAdd}>+</button>
//       </div>
//     )
//   }
// }
/*
  参数一表示唯一的数据源
  参数二表示组件本身的props
*/
function mapStateToProps (state, ownProps) {
  // 获取商品名称
  let pname = ownProps.pname
  // 根据商品名称获取state中对应的数量
  let num = state[pname]
  return {
    num: num
  }
}

/*
  处理事件:把事件处理函数映射到View组件中
  参数一用于进行acting分发
  参数二表示组件本身的props属性
*/
function mapDispachToProps (dispatch, ownProps) {
  return {
    // 这里要产生action，并且将action进行分发
    handleAdd: () => {
      let action = Actions.addProduction(ownProps.pname)
      dispatch(action)
    },
    handleSub: () => {
      let action = Actions.subProduction(ownProps.pname)
      dispatch(action)
    }
  }
}

// export default Item
export default connect(mapStateToProps, mapDispachToProps)(Item)

src/Actions.js文件

/*
  产生action

  action的本质其实就是一个普通对象，该对象描述了一个操作行为：
*/
import * as an from './ActionName.js'
// 用于产生一个添加商品数量的Action
export const addProduction = (production) => {
  return {
    type: an.ADD_ACTION,
    pname: production
  }
}

// 用于产生一个减少商品数量的Action
export const subProduction = (production) => {
  return {
    type: an.SUB_ACTION,
    pname: production
  }
}

src/ActionName.js

export const ADD_ACTION = 'add'
export const SUB_ACTION = 'sub'