React Native学习笔记（五）Redux基础学习

时间：2022-09-04 12:08:14

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创建函数时，触发dispatch
dispatch(completeFetchMenuList(menuList))

Reducers:Action 只是描述了有什么类型的事情发生这一事实，并没有指明该怎么处理这些事情。如何处理这些事情，对应到React中就是应用如何更新 state。而这正是 reducer 要做的事情。
reducer 就是一个函数，接收旧的 state 和 action，返回新的 state。
它的范式定义如下：

(previousState, action) => newState

reducer一般要求是纯函数，所以一般不要在reducer中做这些操作：
修改传入的参数；执行有副作用的操作，如 API 请求和路由跳转；
调用非纯函数，如 Date.now() 或 Math.random()等。

标签：

相关文章