react学习之redux整合到react(2)

原创 JerryMark 教程 react 31阅读 21 天前 举报
新建项目
安装redux
安装react-redux

进入到目录,删除掉不必要的文件,新建store文件夹,然后在store的文件夹下新建actionCreator.js、actionTypes.js、index.js、reducer.js
目录结构大概是这样:

首先看index.js 文件,我们引入了react-redux的Provider组件,引入了store后续会讲,其他没太大改变,详细代码:

store/index.js 文件
这里引入了redux的createStore方法,引入了reducer文件,这个文件稍后介绍

store/reducer.js 文件
reducer放回的是一个方法,接收两个参数 state,action
store派发action 然后判断type类型处理对应的事件
这里我们把action类型定义统一放到actionTypes.js 定义,维护容易

store/actionTypes.js文件
这里就定义两个常量,使用export暴露,所以其他文件就可以访问到

store/actionCreator.js
这里定义的是每个派发的action处理事件,需要返回一个对象,包含一个type,这个type在reducer中要相对应

最后,TodoList.js文件
这里引入了 react-redux 的connect方法
还有引入了action处理文件

上面这段代码主要是映射 state的属性到props上,返回一个对象,这个方法有一个参数state

上面这段代码主要是映射 dispatch的属性到props上,返回一个对象,这个方法有一个参数dispatch
如果不这样做的,我们需要使用store.dispatch() 这种 方式,但是这里并没有引入store.

connect 是一个桥梁,这个函数允许我们将 store 中的数据作为 props 绑定到组件上。
更多的react文章访问:
原文地址

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

赶紧努力消灭 0 回复