0%

redux、react-redux、redux-saga之间的关系与用法

React 的官方定义是用于构建用户界面的 JavaScript 库。通常组件内的数据来源于 stateprops,由于 React 的特点之一单向数据流,当渲染一个组件的数据来源于 props 时,通常情况下是 A -> B,但是随着业务复杂度的增加、组件层级增加,可能会变成 A -> B -> C -> D -> E

redux

严格的单向数据流是 Redux 架构的设计核心。

Redux 中的数据流:

  1. 调用 store.dispatch(action),这会触发一个动作。
  2. reducer 函数会接收到上一步发出的 action,并根据 action 中的 type 属性,执行具体的任务
  3. reducer 返回新的 state
  4. 应用中注册了 store.subscribe(listener) 监听器被调用,监听器里可以使用 store.getState() 获取最新的 state

Action

action 是一个描述事件的简单对象,它是改变 storestate 的唯一方法,它通过 store.dispatch() 方法来将 action 传到 store 中。

添加新 todo 任务的 action 可以这样定义:

1
2
3
4
const action = {
type: 'add_todo',
task: '这是一个新的todo任务',
}

action 本质上是一个 JavaScript 对象。我们约定,action 内必须有一个 type 属性,代表要执行的动作。除此之外,action 上的其他属性和结构都可以由你决定。

当应用规模很大时,action type 通常会定义为字符串常量,用一个专用文件存放。如:

1
2
// actionTypes.js
export const ADD_TODO = 'add_todo';

当一个 type 相同的 action 会频繁调用时,我们可以将它封装为一个 Action 创建函数。如上面的 add_todo,我们可以这样封装:

1
2
3
4
5
6
7
8
9
// actions.js
import { ADD_TODO } from 'actionTypes.js';

export function addToDo(task) {
return {
type: ADD_TODO,
task,
}