初步接触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
