一个完整小巧的Redux全家桶项目
OneArticle: 使用React-Native开发,使用Redux,React-Redux,Redux-Persist,Redux-Saga。
为什么取这个名字呢,我也不想啊,App为OneArticle,但发现数据源的官方应用以前就叫一文,让后我叫一文就不好了。项目地址
一:应用介绍
- 我的项目地址Android端演示 – IOS端,模拟器测试过是没有问题,打包出来?没有开发者账号(笑脸+尴尬),但模拟器测试是OK的。
- 我的数据来源: OneArticle
- 官方正版:观止APP地址:IOS版 – Android版,产品介绍:不用登录注册,没有复杂的算法,不猜你喜欢。和你一样我们喜欢简单,相信优美文字的力量,并乐于坚持。
- 在此声明我什么版也不是,只是使用他们数据做个演示,不得将此应用发布和打包,违规者后果自负。
之前写的纯原生RN项目Mung
二 : 界面演示
三: 功能介绍
- 主题换肤 :实现了无缝换肤,这个算是Redux优势,非常简单。
- 收藏本地化和简单缓存 :每篇收藏的文章都会被保存下来,最近浏览的十篇文章也会被缓存。
- 分享功能 : 实现了微信和朋友圈的分享。
- 无缝切换文章:无缝切换文章实现不会数据冲突。
可以下载个官方的对比下功能全部实现了,简单改了下布局,主要是实战Redux。
四: redux-thunk 和 redux-saga
- 使用redux他们是必选的,一般都是二选一,redux-thunk redux-saga 两个都可以很好的实现一些复杂情况下redux,本质都是为了解决异步action而生,使redux保持完整性,不至于太过混乱。redux-saga 是一个用于管理 Redux 应用异步操作的中间件。 redux-saga 通过创建 Sagas 将所有的异步操作逻辑收集在一个地方集中处理,可以用来代替 redux-thunk 中间件。而且提供了takeLatest/takeEvery可以对事件的仅关注最近事件、关注每一次、事件限频;reudx-saga更方便测试,等等太多了。
五:要求
- 本项目适合已经能熟练使用React-native基本控件。
- 这里直接讲项目里redux的一些实战问题,其他自己看。
六:redux-persist
- 一个是设置的适合设置blacklist黑名单,黑名单里的数据不会保持起来。当然对应的还有白名单whitelist就是仅仅保持名单里的数据,但有个问题开发时每个reducer都是复制单个模块的,而白黑名单只能为一级对象,这样单个reducer里的状态就不能进入名单了。
- 将要忽略的状态写在一个单独的reducer里,这样在写黑名单是就可以将其写进去进行忽略,但这将不太适合维护,例如有些状态属于styles,有些状态属于splash如果都写一起,将会缺乏reducer的专一性。
- persistCombineReducers和persistReducer进行单个reducer的添加白黑名单再设置stateReconciler为reconciler(数据合并的意思),将可以操控到单个reducer的单个状态。
七: redux-saga
/*
* 文章显示只有一篇,请求数据时最多也只能有一种
* 1.解释当请求今天文章花费10s,请求特定一天今天文章需要4s当请求今天文章后2s后请求特定一天文章结果是
* 6s后特定一天文章出来了,刷新。10s后今天文章刷新出来了,这结果显然不对吧。
* 正常是2s后取消当前正在请求的所以文章,在进行新的请求这样才对,这就是下面的写法的解释。
* 2. 解释下take加cancel可以编写出takeLatest,fork第一个参数:需是 Generator 函数, 或者返回 Promise 的普通函数
* */
function* watchRequestArticle() {let lastTaskwhile (true) {const action = yield take(sagaRequestActions)if (lastTask) {yield cancel(lastTask)}yield put({type: REFRESH_ARTICLE_DOING})switch (action.type) {case SAGA_TODAY_ARTICLE:lastTask = yield fork(dealtData,action)breakcase SAGA_PREV_ARTICLE:lastTask = yield fork(dealtData,action)breakcase SAGA_NEXT_ARTICLE:lastTask = yield fork(dealtData,action)breakcase SAGA_RANDOM_ARTICLE:lastTask = yield fork(dealtData,action)break}}
}
项目简单明了,而且没有太多复杂的逻辑,可以直接看项目源码
八: 项目地址
九: 分享一个之前写的RN项目
React-Native 篇
七分设计感的纯React-Native项目Mung
一个完整小巧的Redux全家桶项目
react-native拖拽排序
多功能React-Native-Toast组件
一个完整小巧的Redux全家桶项目相关推荐
- 如何实现一个React全家桶项目(附完整教程及代码)
文章目录 如何实现一个React全家桶项目(附完整教程) 1.相关命令: 运行项目: `yarn start` 项目打包: `yarn build` 暴露配置项: `yarn eject` 2.项目目 ...
- 从头到尾创建一个vue全家桶项目
一.vue全家桶有哪些 全家桶:vue, vue-router, vuex, axios, elementui vue-router: 路由 vuex: vue状态机 axios: 网络请求工具 el ...
- Vue全家桶-项目实战笔记
写在前面 这是我跟着黑马程序员的Vue全家桶-项目实战教程写的一篇笔记,主要记录思路,内容不完整,这里只写到了用户列表管理,进来的友友们可以根据目录,看是否有自己需要的功能 这篇笔记记录的是基础vue ...
- VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局 一.页面布局 二.创建Home组件 三.路由index.js 文件配置主页路径 四.添加welcome组件 一.页面布局 <el-container& ...
- 猿创征文 | 开箱即用 yyg-cli:快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...
- 如何搭建一个完整的Vue3.0 + ts 的项目
如何搭建一个完整的Vue3.0 + ts 的项目 相信9月18日尤大大的关于Vue3.0的发表演讲大家一定有所关注,现在Vue3.0 也已经进入RC阶段(最终产品的候选版本,如果没有问题则可发布成为正 ...
- vue怎么改logo_vue全家桶项目构建教程
前言 vue是现阶段很流行的前端框架,很多人通过vue官方文档的学习,对vue的使用都有了一定的了解,但再在项目工程化处理的时候,却发现不知道改怎么更好的管理自己的项目,如何去引入一些框架以及vue全 ...
- React全家桶项目
开篇 利用业余时间,做了个React项目,算是成品吧,比较简单,还有很多瑕疵.目录结构相当简单.没有数据库,你们运行不起来.想运行起来的话,把express调用数据库的部分全删掉,写死数据. ak47 ...
- React全家桶项目搭建
资源:create-react-app.react.react-dom.redux.react-redux.redux-thunk.react-router-dom.antd-mobile/antd. ...
最新文章
- 抓取一个连续的网页_搞懂各大搜索引擎蜘蛛的抓取规则,快速获得排名!
- 大数据学习(2-2)- 使用docker安装配置Hadoop环境
- 设置熄屏_刚买的手机微信收不到信息提醒耽误事情,手机到手一定要这样设置...
- 可迭代对象与迭代器 0318 草稿
- lm723大电流可调电源电路图_三端稳压模块LM338组成的高精度大电流可调稳压电源,电流可到达5A...
- PHP导出成word文档
- AngularJS复习小结
- 使用Netapp与windows server 2012搭建 iSNS服务器
- 惠普:某些 SSD 驱动的寿命只有32,768 小时(3年多),立即更新!
- python画棒棒糖程序_python之turtle简单绘制学习
- 机器学习概念笔记(1)——混淆矩阵、Precision、Recall、F-score
- 360浏览器显示没网络连接服务器,360浏览器无法连接网络?怎么办?
- CentOS7 安装 transmission
- Winxp不幸中毒以及手杀过程
- Driverjs-前端引导页组件
- 找出知晓秘密的所有专家
- Unity手机震动,Unity -> ios 震动
- 读书的理由——好书推荐
- 有关计算机的英语名言,100句超级简洁但有力量英文励志名言
- SpringBoot之静态资源访问配置