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

前言

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

主要有三要素：

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

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

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

主要有三层数据流：

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

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

长官更新任务状态

1. 单一的state树

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

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

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

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

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

// actions.jsexport default function todos(type, a, b) {  return {    type,    a,    b  }}

3. Reducer通过action更新state

// reducers.jsexport 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的变化

1. 维持应用的 state；

2. 提供 getState() 方法获取 state；

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

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

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

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

// store.jsimport { 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()))// 发起一系列 actionstore.dispatch(todos('add', 100, 99));store.dispatch(todos('sub' ,100, 99));// 停止监听 state 更新unsubscribe();

redux简单学习（二）

关键字：JavaScript, action, state, store

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！