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()等。

0 0