redux解析

Posted senjer

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了redux解析相关的知识,希望对你有一定的参考价值。

工作流程

用户在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要从多个来源获取数据

 

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

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

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

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

以上是关于redux解析的主要内容,如果未能解决你的问题,请参考以下文章

“ES7 React/Redux/GraphQL/React-Native 片段”不适用于 javascript 文件。除了安装它,我还需要配置其他东西吗?

4redux源码解析 - 糅合多种dispatch

片段(Java) | 机试题+算法思路+考点+代码解析 2023

redux教程之源码解析2 combineReducers(分析在注释中)

redux源码解析-redux的架构

Redux异步解决方案之Redux-Thunk原理及源码解析