js手札--redux简单学习[ store, action, reducer ]

wyk1184 发布于2019-08-19 18:23 / 3001人阅读

摘要：简单学习前言是一套流的处理机制。可以说是真正的管理者，其他的，如是命令，是执行命令的士兵。打印初始状态每次更新时，打印日志注意返回一个函数用来注销监听器发起一系列停止监听更新简单学习二

Redux简单学习 - [ store, action, reducer ] 前言

redux是一套state流的处理机制。

主要有三要素：

store 【长官】管理状态，给某个士兵发命令

action 【命令】一种长官和士兵之间沟通的方式

reducer 【士兵】执行命令，并反馈给长官

主要有三层数据流：

长官下达命令并把当前任务状态告诉士兵 =>

士兵执行命令反馈任务状态给长官 =>

长官更新任务状态

1. 单一的state树

所有状态都在一颗唯一的state树种

2. 要改state，只能通过Action指令

Action通过type，表明了我要修改什么东东，相当于一个指令

{
  type: "ADD_TODO",
  text: "Build my first Redux app"
}

Action一般通过Action创建函数生成

// actions.js

export default function todos(type, a, b) {
  return {
    type,
    a,
    b
  }
}

3. Reducer通过action更新state

// reducers.js

export default function todoApp(state, action) {
  switch (action.type) {
    case "add":
      return Object.assign({}, state, {
          result : action.a + action.b
      })
    case "sub":
      return Object.assign({}, state, {
          result : action.a - action.b
      })
    default:
      return state
  }
}

4.Store管理state的变化

维持应用的 state；

提供 getState() 方法获取 state；

提供 dispatch(action) 方法更新 state；

通过 subscribe(listener) 注册监听器;

通过 subscribe(listener) 返回的函数注销监听器。

可以说store是真正的state管理者，其他的，如action是命令，reducer是执行命令的士兵。

// store.js

import { createStore } from "redux";
import { todos } from "./actions";
import { todoApp } from "./reducers.js";

let store = createStore(todoApp);

// 打印初始状态
console.log(store.getState())

// 每次 state 更新时，打印日志
// 注意 subscribe() 返回一个函数用来注销监听器
let unsubscribe = store.subscribe(() =
  console.log(store.getState())
)

// 发起一系列 action
store.dispatch(todos("add", 100, 99));
store.dispatch(todos("sub" ,100, 99));

// 停止监听 state 更新
unsubscribe();

redux简单学习（二）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79542.html

js手札--redux简单学习（二）

摘要：简单学习二简单学习，合并多个如有下面两个，，换成，则为则调用时可以写成这样 redux简单学习（二） redux简单学习[ store, action, reducer ] 1. combineReducers combineReducers，合并多个reducer 如有下面两个reducer，todoApp，textApp // reducers/todoApp.js export...

Anleb 2019-08-19 18:24 评论0 收藏0
Redux入门教程（快速上手）

摘要：接下来演示不变性打开终端并启动输入。修改代码如下我们使用在控制台中打印出当前的状态。可以在控制台中确认新的商品已经添加了。修改和文件最后，我们在中分发这两个保存完代码之后，可以在浏览器的控制台中检查修改和删除的结果。典型的Web应用程序通常由共享数据的多个UI组件组成。通常，多个组件的任务是负责展示同一对象的不同属性。这个对象表示可随时更改的状态。在多个组件之间保持状态的一致性会是一...

amuqiao 2019-08-21 16:55 评论0 收藏0
Redux之旅－2

摘要：之旅时间作者三月懒驴入门配置文章链接之旅链接前言上一篇文章，很简单的用代码来说明了，，，各自的意义和相互的联系以及在实际开发的应用。分割你的，使每一个更有意义，之后再合并回来。分割和合并和不同。的只有一个只有一个就意味着只有一个。 Redux之旅－2 时间：2016.4.22-11:24作者：三月懒驴入门配置文章：链接Redux之旅－1：链接 1. 前言上一篇文章，很简单的用代码来说...

liangzai_cool 2019-08-19 18:20 评论0 收藏0
Redux 进阶 - react 全家桶学习笔记（二）

摘要：在函数式编程中，异步操作修改全局变量等与函数外部环境发生的交互叫做副作用通常认为这些操作是邪恶肮脏的，并且也是导致的源头。注：这篇是17年1月的文章，搬运自本人 blog... https://github.com/BuptStEve/... 零、前言在上一篇中介绍了 Redux 的各项基础 api。接着一步一步地介绍如何与 React 进行结合，并从引入过程中遇到的各个痛点引出 ...

Godtoy 2019-08-23 10:58 评论0 收藏0