react-redux初探

原创 大大大大糖糖 随笔 react 307阅读 2017-06-29 14:41:18 举报

最近在看react,react-redux这个东西研究到脑子炸裂,现整理其用法,以防日后蒙圈。。

需求:做一个简易备忘录
功能:1、添加待办事项
2、改变事项状态
3、tab切换“全部”、“已完成”、未完成
效果:

react-redux初探

分析:可分为3个组件
1、输入框
2、事件列表
3、tab切换按钮

准备
1、使用yoman工具构建的react-webpack项目
2、安装redux和react-redux

项目结构

react-redux初探

分析
reducer
javascript 代码

纯函数返回新的state,定义reducer1、reducer2,用redux中的combineReducers组合两个reducer,导出模块。

index.js
javascript 代码

引入reducer,用redux中的createStore存入应用的Store,通过react-reducer中的Provide将store传入子组件

main.js
javascript 代码

引入容器组件

容器组件container/footerFilterjs

javascript 代码

引入action,引入并调用action中的状态函数,通过dispatch改变store的值,用react-redux的connect将容器组件的state转化为props传给展示组件
(可使用mapStateToProps、mapDispatchToProps)

展示组件FooterLink

javascript 代码

展示组件利用容器组件传过来的props执行交互事件

路漫漫其修远兮,吾将上下而求索

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复