redux解析

Posted 2021-10-27 senjer

工作流程

用户在view操作发出 Action

store.dispatch(action)

Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action， Reducer 会返回新的 State

let nextState = todo(previousState, action)

State 一旦有变化，Store 就会调用监听函数

store.subscribe(listener)  // // 设置监听函数

listener可以通过store.getState()得到当前状态，如果使用的是 React，这时可以触发重新渲染 View

function listerner() {
  let newState = store.getState()
  component.setState(newState)   
}

概念

Action

是一个对象，其中的type属性是必须的， 用来描述当前发生的事情，改变 State 的唯一办法

const action = {
  type: ‘ADD_TODO‘,  // 名称
  payload: ‘content‘ // 携带的信息
}

state

是包含所有数据的store对象的某个时间的数据集合

import { createStore } from ‘redux‘

const store = createStore(fn)  // 创建store对象
const state = store.getState()  // 获取store对象的当前state

store.dispatch()

是 View 发出 Action 的唯一方法

import { createStore } from ‘redux‘
const store = createStore(fn)

store.dispatch({
  type: ‘ADD_TODO‘,
  payload: ‘content‘
})

reducer

store 收到 action，得到一个新的 State的计算过程，是个纯函数（同样的输入，必定得到同样的输出）

const reducer = function (state, action) {  // 当前state，传入的action
  // ...
  return new_state;  // 返回一个新state
};

store.subscribe()

设置监听函数，一旦 State 发生变化，就自动执行这个函数

import { createStore } from ‘redux‘
const store = createStore(reducer)

store.subscribe(listener)

设计思想

Web 应用是一个状态机，视图与状态是一一对应的

所有的状态，保存在一个对象里面

适用场景

用户的使用方式复杂

不同身份的用户有不同的使用方式（比如普通用户和管理员）

多个用户之间可以协作

与服务器大量交互，或者使用了WebSocket

View要从多个来源获取数据

 

某个组件的状态，需要共享

某个状态需要在任何地方都可以拿到

一个组件需要改变全局状态

一个组件需要改变另一个组件的状态