redux 基础概念--redux(1)

本文将先介绍redux的一些基础概念,然后再聊聊其中的核心理念和相关原则。

Redux 的构成

我们知道,reduxStoreReducerAction三个部分组成。其中,Action是把数据从应用(视图)传到store的有效载体,是store数据的唯一来源;Reducer则指定了应用状态的变化如何响应actions并发送到store,换句话说:"actions 只是描述了有事情发生这一事实,而 reducer 则是描述应用如何更新 reducer。"

一些使用原则

store 唯一

当我们使用redux的时候,我们的整个state被储存在一个Object中,并且这个Object只存在于唯一的一个store中。

js 复制代码
console.log(store.getState())

/* 输出
{
  visibilityFilter: 'SHOW_ALL',
  todos: [
    {
      text: 'Consider using Redux',
      completed: true,
    },
    {
      text: 'Keep all state in a single tree',
      completed: false
    }
  ]
}
*/

State 只读

我们不能直接修改State

唯一改变State的方法就是触发ActionAction是一个用于描述已发生事件的普通对象。

这样做有几个好处:

  1. action仅表达修改意图,视图和网络请求都不能直接修改state,不会出现修改顺序的问题。
  2. action本身只是对象,可获取可操作。

Action 常见的结构如下

js 复制代码
{
    type: 'xxxx',
    body: 'xxxx'
}

所以我们可以通过如下函数很容易的制造 Action

ts 复制代码
const actionCreator = type => body => ({type, body});

调用的话执行两个函数就行。

使用纯函数来执行修改

我们知道action只是描述,真正对state做更改的具体行为还是reducer,Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。

举个例子:

js 复制代码
function visibilityFilter(state = 'SHOW_ALL', action) {
  switch (action.type) {
    case 'SET_VISIBILITY_FILTER':
      return action.filter
    default:
      return state
  }
  .........
}

特性

单向数据流

严格的单向数据流意味着应用中所有的数据都遵循相同的生命周期,这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化,这样可以避免使用多个且独立的无法相互引用的重复数据。

redux 生命周期

  1. 我们调用store.dispatch(action);

这里就是在说,我们需要做一个啥事情,

  1. Redux store调用传入的reducer函数

这里就是先进行计算一下:Store 会把两个参数传入 reducer: 当前的 state 树和 action。

Store 会把两个参数传入 reducer: 当前的 state 树和 action。

  1. 根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。

把多个计算结果统一

  1. Redux store 保存了根 reducer 返回的完整 state 树。

得到结果

那么这就是本篇文章的全部内容啦,我们从基本概念聊到了核心原则,然后聊到了Redux的一些特性,下一篇文章我们会聊一些Redux的使用~

相关推荐
没有bug.的程序员4 小时前
JAVA面试宝典 - 《MyBatis 进阶:插件开发与二级缓存》
java·面试·mybatis
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
顾林海7 小时前
Android 性能优化:启动优化全解析
android·java·面试·性能优化·zygote