React Native学习笔记(五)Redux基础学习
来源:互联网 发布:java 序列化对比 编辑:程序博客网 时间:2024/06/08 08:42
1.Redux是什么
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。Redux作为一个数据流管理框架,在React-Native中使用react-redux库来连接Redux和React,对应用中的数据进行管理。
2.Redux中的一些基本概念
Store:就是用来维持应用所有的 state 树的一个对象。Store 不是类。它只是有几个方法的对象。根据已有的 reducer 来创建 store 是非常容易的,只需要把根部的 reducers 传递给 createStore。
例如:
import menuList from './components/ReduxModel/reducers'let realStore = createStore(menuList, undefined, applyMiddleware(thunk))
在这里menuList是一个reducers。
Store 是把reducers和action联系到一起的对象。Store 有以下职责:维持应用的 state;提供 getState()方法获取state;提供 dispatch(action) 方法更新 state;通过 subscribe(listener) 注册监听器。Redux 应用只有一个单一的 store。当需要拆分处理数据的逻辑时,使用 reducer 组合而不是创建多个 store。
State: 是一个比较宽泛的概念,一般也称为状态树。在 Redux API 中,通常是指一个唯一的 state 值,由 store 管理且由 getState()方法获得。它表示了 Redux 应用的全部状态,通常为一个多层嵌套的对象。一般约定:顶层 state 或为一个对象,或像 Map 那样的键-值集合,也可以是任意的数据类型。
Action:Action 是把数据从应用传到 store 的有效载荷,也是将数据放入 store 的唯一途径。Action 本质上是一个JavaScript普通对象。action 内使用一个字符串类型的 type 字段来表示将要执行的动作。多数情况下,type 会被定义成字符串常量。当应用规模越来越大时,建议使用单独的模块或文件来存放 action。一般约定:action 必须拥有一个 type ,它指明了需要被执行的 action 类型。除了 type 字段外,action 对象的结构完全可以由自己来决定。如下代码定义一个action:
//在types.js文件中export const FETCH_MENU_COMPLETE = 'FETCH_MENU_COMPLETE';//action.js文件中import * as Types from './types';//定义一个action{ type: Types.FETCH_MENU_COMPLETE, index: index}
有了action以后,我们一般会定义一个action 创建函数用来生成action。当调用 action 创建函数时,一般会触发一个 dispatch。
例如:
//action创建函数,Redux 中的 action 创建函数仅仅返回一个 action 对象。摘录来自: Unknown. “Redux 中文文档”。 iBooks. function completeFetchMenuList(menuList) { return { type: Types.FETCH_MENU_COMPLETE, menuList, }}//调用action创建函数时,触发dispatchdispatch(completeFetchMenuList(menuList))
Reducers:Action 只是描述了有什么类型的事情发生这一事实,并没有指明该怎么处理这些事情。如何处理这些事情,对应到React中就是应用如何更新 state。而这正是 reducer 要做的事情。
reducer 就是一个函数,接收旧的 state 和 action,返回新的 state。
它的范式定义如下:
(previousState, action) => newState
reducer一般要求是纯函数,所以一般不要在reducer中做这些操作:
修改传入的参数;执行有副作用的操作,如 API 请求和路由跳转;
调用非纯函数,如 Date.now() 或 Math.random()等。
- React Native学习笔记(五)Redux基础学习
- react-redux 学习笔记
- react-redux学习笔记
- react学习之redux(五)
- react-redux学习笔记-2-react-redux
- REACT NATIVE + REDUX 初学者学习笔记 例子 @吉他码农
- React && Redux 学习笔记(一)
- react && redux 学习笔记(二)
- React学习(八):Redux基础
- 学习react-native之加入redux
- react、redux个人学习笔记
- React Native 学习笔记五(关于样式的使用)
- React Native 学习笔记(五)-- 样式Style
- react-redux学习笔记-1-react
- react项目学习笔记四(redux和redux的中间件redux-thunk的认识)
- React-Native 学习笔记
- react native学习笔记
- react-native 学习笔记
- 异步事件模型
- CODEFORCES 468B Two Sets ---并查集建树
- 最大正方形
- Web Cache替换算法分析(一)
- Modelsim与ISE联合仿真若干须知
- React Native学习笔记(五)Redux基础学习
- Web Cache替换算法分析(二)
- 《Windows程序设计》读书笔九 子窗口控件
- poj1011 sticks
- css3模糊滤镜
- 欢迎使用CSDN-markdown编辑器
- core文件调试
- ibatis中#和$符号的区别
- core文件调试