和我一起入坑-React-Native-加入Redux的TodoList
读前须知
这个项目是第一次使用Redux的实例,并不具有专业性的理论知识。纯粹分享一次开发过程与心得。之前写了一篇没有加入Redux的React Native ToDoList的小博文。这个项目也是在原来的基础上进行装修完成的。目的是为了体验一下高深莫测的Redux。
总之,在各位网友的友情支持下,我依然没有看懂redux数据流的走向,勉勉强强通了一点。
(一)拆分结构
根据自己的习惯和固定套路,拆分目录结构和组件结构。
├── public
├── todos-redux
│ ├── actions
│ │ └── index.js
│ ├── components
│ │ ├── todoItem.js
│ │ └── todoList.js
│ ├── containers
│ │ ├── add.js
│ │ ├── all.js
│ │ ├── completed.js
│ │ └── incomplete.js
│ ├── reducers
│ │ ├── index.js
│ │ └── todos.js
│ ├── store
│ │ └── configureStore.js
│ ├── utils
│ │ └── utils.js
│ ├── index.js
│ ├── router.js
把react-navigation的导航组件集中放在router.js纯粹是个人习惯。
components中的组件是展示组件,不直接使用Redux。而containers中的是直接使用 Redux的组件。在这里可以看成components是containers的子组件。
(二)代码实现
入口文件
redux-persist是用来做redux的数据持久化。使用方法直接参考在GitHub上的基本示例。这里的代码基本上都是固定套路。
// index.js
import React, {Component} from 'react'
import { Provider } from 'react-redux'
import { TodosReduxStack } from './router'import { PersistGate } from 'redux-persist/integration/react'
import configureStore from './store/configureStore'
const { persistor, store } = configureStore()
export default class TodolistRedux extends Component {render(){return (<Provider store={store}><PersistGate loading={null} persistor={persistor}><TodosReduxStack /></PersistGate></Provider>)}
}
创建Action
// action/index.js
import Utils from '../utils/utils'export const addTodo = (text) => {return {type: 'ADD_TODO',id: Utils.uniqueId(),content: text}
}export const toggleTodo = (id) => {return{type:'TOGGLE_TODO',id}
}
Reducers
// reducers/todos.js
var initState = [];
const todos = (state = initState, action)=>{switch(action.type){case 'ADD_TODO':return[...state,{id: action.id,content: action.content,completed: false}]case 'TOGGLE_TODO':return state.map((t) => {if (t.id !== action.id) {return t} return Object.assign({},t,{completed:!t.completed})})default:return state}
}export default todos
容器组件
connect()() 这个写法叫函数的柯里化,涨知识啦。
// containers/all.js
const mapStateToprops = (state) => {return {todos: state.todos}
}const mapDispatchToProps = (dispatch) =>{return {onTodoClick: (id) => {dispatch(toggleTodo(id))}}
}export default connect(mapStateToprops, mapDispatchToProps)(AllScreen)
使用filter函数过滤数组,返回指定的值,这个地方有点鸡肋哈,但是我不会其他的写法了。
// containers/completed.js
const mapStateToprops = (state) => {return {todos: state.todos.filter(t => t.completed)}
}
(三)使用Redux前后对比
没有使用Redux之前,项目使用了React Native内置的DeviceEventEmitter方法。添加事项后要通知其他组件更新数据。还大量使用了AsyncStorage做数据的持久化,每一次的数据更新都需要用到它。如果是在稍复杂的项目中这样写,会死翘翘的!使用Redux 和 redux-persist 可以轻松实现这个功能,效果是明显的。在已完成页面将事项切换为未完成,该事项会直接消失,跑到未完成页面中,这个地方并不需要做额外的处理。
说在后面的话
这种连个图都没有也没有深入讲解redux的文字都敢发出来,真的是表脸 (手动滑稽)。
完整的项目在这里GitHub Todos Redux。
和我一起入坑-React-Native-加入Redux的TodoList相关推荐
- React Native集成Redux框架讲解与应用
学过React Native的都知道,RN的UI是根据相应组件的state进行render的,而页面又是由大大小小的组件构成,导致每个组件都必须维护自身的一套状态,因此当页面复杂化的时候,管理stat ...
- 和我一起入坑-React-Native入门-ToDoList
前置工作 (〇)了解官方文档是必须的 react-native官方文档 react-native中文文档 (一)安装必需的软件 以下步骤官网早有详细步骤,在此不必赘述. 1.Chocolatey Ch ...
- React Native学习速记
学习路线建议:ES5/6 -> React -> React Native -> Redux + React-Navigation等 ES5 :https://wangdoc.co ...
- Rust入坑指南:坑主驾到
欢迎大家和我一起入坑Rust,以后我就是坑主,我主要负责在前面挖坑,各位可以在上面看,有手痒的也可以和我一起挖.这个坑到底有多深?我也不知道,我是抱着有多深就挖多深的心态来的,下面我先跳了,各位请随意 ...
- 超详细 React Native 入坑使用指南,我在元宇宙等你
前言 大家好,我是虚竹,今天给大家分享一下我是如何快速通关打怪搭建 React Native 跨端开发环境,并使用大家非常熟悉的开发工具 VSCode 来编写丝滑般的代码.编写丝滑般代码会再下一篇输出 ...
- Vue React Angular之三国杀,web前端入坑第六篇 上
「 懒癌引发血案 」 目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...
- Vue、React、Angular之三国杀,web前端入坑第六篇(上)
「 懒癌引发血案 」 目前前端技术栈发生了翻天覆地的变化,上篇刚写了只会jquery 要失业,再不学新的你就要被淘汰,虽然有点危言耸听,不过现实情况确实是这样. vue.react.angular对比 ...
- React native 项目进阶(redux, redux saga, redux logger)
之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能, ...
- React Native填坑之旅--动画篇
React Native填坑之旅--Button篇 React Native填坑之旅--动画 React Native填坑之旅--HTTP请求篇 动画是提高用户体验不可缺少的一个元素.恰如其分的动画可 ...
最新文章
- 用顺序栈实现十进制向二进制转化
- LeetCode 28_Implement strStr()
- Ubuntu12下安装redis(多图版)+ Jedis连接Redis
- VC++ ToolTip的简单使用
- 玩游戏学微积分!探索理工锻炼的游戏化应用, 腾讯发布新游戏《微积历险记》...
- 同学之间互相出的一些有趣题目
- 初中数学最全几何模型_老师熬夜整理:初中数学最全几何模型大汇总,学生大呼“过瘾”...
- 生成验证码的一段源代码
- 济南大学计算机二级成绩查询,济南大学泉城学院教务系统成绩查询登录入口 jwxt.ujnpl.com/jwglxt/,精英高考网...
- 20. Feature分支
- 陪集分解和J.Lagrange定理的一些应用
- 批量删除多个 Word 文件中的分节符
- 优思学院|精益生产的前世今生
- java关联jnlp,[javaws]jnlp介绍及使用
- 女神节礼品:大学男神创作“专属情诗app”
- BlackHat DEFCON现场秀:阿里安全专家演示“视频水印叠加”和“一分钟越狱iOS 11.4”...
- 回味无穷:历史名人的幽默隽语[转自人民网]
- html项目的致谢词,毕业论文的致谢词范文(精选5篇)
- 2022年秋,工程伦理期末考试答案(仅供参考)
- 重温儿时经典《坦克大战》
热门文章
- 微博超话签到小工具v2.0 签到管理操作
- 改时区_太平洋奇葩小国:为了虚名改时区,全国仅一个城市,至今仍是部落
- 代码提交本地代码和远程代码不同步问题(笔记)
- 苹果cms V10模板 仿特视网自适应模板
- WordPress主题 RiPro v5.0高级付费素材资源类主题
- 简洁自适应个人码农主页源码
- 苹果cmsv10播放器源码插件
- Spring Cloud微服务之Nacos服务发现(八)
- XCode 4.2.1 项目的几个模版说明
- 实践证明,SQL Server 2000 + 2005 + 2008,完全可以共存