react-redux 和 redux-saga 小结
2018-07-03 09:10
609 查看
react-redux 将 store 绑定到 props 上,便于全局调用。
redux-saga 是将 redux 的同步转换为异步。
注:
dispatch 到 saga , saga 匹配行为的 type,调用接口请求数据,并将数据 通过 dispatch 传给 redux。
redux 匹配 type 并将数据绑定到 props 上
思路:
(1)routes 下的页面触发 action
(2)saga 下的异步 redux 进行匹配
找到对应的 fork(reducer)
在 reducer 中调用整体的也是唯一的 action
在 functionName 中使用 put 代替 dispatch
(3)redux 下的同步 redux 进行匹配
找到对应的 reducer
在 reducer 中进行 type 匹配
case 匹配 type , return 出去的数据 需要 先
初始化。
将获取的 数据 return 到 props 上
(4)全局获取 store 上的数据
.
redux-saga 是将 redux 的同步转换为异步。
注:
dispatch 到 saga , saga 匹配行为的 type,调用接口请求数据,并将数据 通过 dispatch 传给 redux。
redux 匹配 type 并将数据绑定到 props 上
思路:
(1)routes 下的页面触发 action
this.props.dispatch({ type:"xxx", // 行为名称 payload: yyy })
(2)saga 下的异步 redux 进行匹配
找到对应的 fork(reducer)
在 reducer 中调用整体的也是唯一的 action
yield takeLatest("xxx",(yyy) => functionName(yyy))
在 functionName 中使用 put 代替 dispatch
yield put({ type:"aaa", // 数据type payload: bbb })
(3)redux 下的同步 redux 进行匹配
找到对应的 reducer
在 reducer 中进行 type 匹配
case 匹配 type , return 出去的数据 需要 先
const initstate = { ccc: ddd }
初始化。
将获取的 数据 return 到 props 上
(4)全局获取 store 上的数据
const { ccc } = this.props;
.
相关文章推荐
- react-redux使用小结
- react知识小结——深入浅出React和Redux
- Redux-Saga在React工程架构之的应用实践详解
- React学习笔记_Redux-Saga
- electron+react+redux+material-ui桌面应用小结
- redux在react-native上使用(二)--加入redux-saga
- rn+redux+immutable+saga+react-navigation技术栈
- react-redux使用小结
- react-thunk迁到redux-saga,他们的对比
- 在create-react-app脚手架中:【使用React-Redux让代码最优雅的呈现】
- React Native之Redux使用详解之Actions(29)
- React入门实例:组件化+react-redux实现网上商城(1)
- react项目学习笔记四(redux和redux的中间件redux-thunk的认识)
- 基于React+Router+Redux+Sagas+fetch+ant Design +less + es6+mockjs的项目过程总结
- 教你如何在React及Redux项目中进行服务端渲染
- Facebook React Native 配置小结
- React-redux-webpack项目总结之reduce、action、store、components 是如何开车的
- react-redux 的 todomvc
- react+redux实战
- react-Redux 的简单介绍(简单、易懂系列!)