初步接触Redux中，发现了一个适合学习的小栗子，通过对苹果篮子吃苹果的栗子对Redux进行学习总结。

苹果篮子

一、实现的功能

• 摘苹果 - 摘苹果时掉后台接口，更新苹果list，当前苹果（暂未实现）
• 统计苹果 - 统计当前苹果和已吃掉苹果
• 吃苹果 - 更新苹果list，统计苹果

二、栗子介绍

基于create-react-app脚手架，进行npm run eject后的代码架构。关于脚手架在另一篇文章 react脚手架

项目结构

除了脚手架自带的其他只引入了antd和redux

三、实现的功能

统计

页面读取的是reducer中初始状态，而所有redux中的状态都将作为this.props传递给组件。在于页面中state自己控制。

// reducer.js  苹果篮子初始状态
const initialState = {
  isPicking: false, // 是否摘苹果
  newAppleId: 3, // 新苹果ID
  apples: [ // 苹果list
    {
      id: 0,
      weight: 233, 
      isEaten: true
    },
    {
      id: 1,
      weight: 100,
      isEaten: false
    },
    {
      id: 2,
      weight: 250,
      isEaten: false
    }
  ]
}

// jsx  通过this.props取到redux中的状态，在组件中进行篮子当前和吃掉数据的统计
    let { apples, actions } = this.props
    let stats = {
      appleNow: {
        quantity: 0,
        weight: 0
      },
      appleEaten: {
        quantity: 0,
        weight: 0
      }
    }

    apples.map( (apple) => {
      let seletor = apple.isEaten ? 'appleEaten' : 'appleNow'
      stats[seletor].quantity  ++
      stats[seletor].weight += apple.weight
    })

       <section className="stats">
          <div className="stats-left stat">
            <div className="title">当前</div>
            <div className="content">
            {stats.appleNow.quantity}个苹果，
            {stats.appleNow.weight}克</div>
          </div>
          <div className="stats-right stat">
            <div className="title">已吃掉</div>
            <div className="content">
            {stats.appleEaten.quantity}个苹果，
            {stats.appleEaten.weight}克</div>
          </div>
        </section>

苹果list的控制

将redux中获取的数据保存到当前组件state中，并通过state传递给子组件，子组件接收props后处理数据。

// 苹果篮子.jsx
        <section className="apple-list">
          { apples.map((apple) => <AppleItem  state={apple} key={apple.id} eatApple={this.props.actions.eatApple}/>)}
        </section>
// 苹果.jsx
 render () {
    let {state, eatApple} = this.props
    if (state.isEaten) return null  // 如果isEaten为true，苹果已经被吃掉，应返回null，不显示在苹果list中
    return (
      <div className="appleItem">
          <div className="apple"><img src={imgUrl} alt=""/></div>
          <div className="info">
              <div className="name">红苹果 - {state.id}号</div>
              <div className="weight">{state.weight}克</div>
          </div>
          <div className="btn-item">
            <Button type="primary" onClick={eatApple.bind(this, state.id)}>吃掉</Button>
          </div>
      </div>
    )
  }

吃苹果功能

本次栗子中也使用父组件传递子组件actions，先actions -> reducers

// actions 传递type和载荷
eatApple: appleId => ({
    type: 'apple/EAT_APPLE',
    payload: appleId
  })
// reducers  fromJs来自immutable
export default (state = initialState, action) => {

  switch (action.type) {
    case 'apple/EAT_APPLE':
      return fromJS(state).setIn(['apples',action.payload,'isEaten'], true).toJS(); // 改变苹果isEaten状态为true
      break
    default: 
      return state
      break
  }
}

未完再续。。。

案例参考：https://segmentfault.com/a/1190000005356568
源码：https://github.com/ckinmind/apple-basket-redux
我的实现（刚刚实现吃苹果功能）https://github.com/yangxy6/react-redux-demo
Redux学习：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html