ReactNative Redux flow

关于Redux,理解Redux flow的工作逻辑图

Redux flow

---

---

---

1. Action

Action 是把数据从应用传到 store 的有效载荷。它是 store 数据的唯一来源。一般来说你会通过 store.dispatch()将 action 传到 store。

添加新 todo 任务的 action 是这样的：

const ADD_TODO = 'ADD_TODO'

Action 创建函数

function addTodo(text) {
  return {
    type: ADD_TODO,
    data: text
  }
}

Redux 中只需把 action 创建函数的结果传给 dispatch() 方法即可发起一次 dispatch 过程。

dispatch(addTodo(text));

store 里能直接通过 store.dispatch() 调用 dispatch() 方法，但是多数情况下你会使用 react-redux 提供的 connect() 帮助器来调用。bindActionCreators()可以自动把多个 action 创建函数 绑定到 dispatch() 方法上。

image.png

(property) dispatch: Dispatch
(action: any) => any

也就是 :

import { Dispatch } from 'redux';

export const setSomeText = (
  dispatch: Dispatch,
) => {
  ......
  dispatch(addTodo(text))
};

---

---

---

2. Reducer

Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。

在 Redux 应用中，所有的 state 都被保存在一个单一对象中。建议在写代码前先想一下这个对象的结构。如何才能以最简的形式把应用的 state 用对象描述出来？

dispatch数据之后, 也就是传入store之后,如果要获取数据.

const InitState: string =  'hello world';

const getSomeText = ( state = InitState, action: { type: string; data: string } ): string => {
  const { type, data } = action;
  switch (type) {
    default:
      return state;
    case ADD_TODO:
      return data as string;
  }
};

以 todo 应用为例，需要保存两种不同的数据：

• 当前选中的任务过滤条件；
• 完整的任务列表。

---

---

---

3. Store

Store 就是把它们Action和Reducer联系到一起的对象。Store 有以下职责：

• 维持应用的 state；
• 提供getState()方法获取 state；
• 提供dispatch(action)方法更新 state；
• 通过 subscribe(listener) 注册监听器;
• 通过subscribe(listener)返回的函数注销监听器。

再次强调一下 Redux 应用只有一个单一的 store。当需要拆分数据处理逻辑时，你应该使用 reducer 组合而不是创建多个 store。

---

对Redux flow理解

1.UI界面的事件, 通过Action将数据传递到Reducer
2.Reducer通过哪种过滤条件和怎么样的数据格式将数据更新到Store.
3.Store通过存储在Store中的state元素, setState更新.
4.setState发生变化, 重新render渲染

值得注意 : dispatch(action) 中 action返回的是一个对象, 最终是一个对象, 所以dispatch(对象) , 更新某一个对象.

PS : 如果是要dispatch(function)呢, 这里就需要用到一个中间件 redux-thunk
思考 : 那么dispatch(对象) 能做到更新store中的值, 那么dispatch(function)的应用场景是什么?