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的使用~

相关推荐
wangbing11254 小时前
界面规范8-文字
前端·javascript·html
盛夏绽放4 小时前
抽成独立组件库:微前端架构下公共组件共享的最佳实践
前端·有问必答
江拥羡橙4 小时前
【目录-单选】鸿蒙HarmonyOS开发者基础
前端·ui·华为·typescript·harmonyos
qczg_wxg5 小时前
高阶组件介绍
开发语言·javascript·react native·ecmascript
小菜全5 小时前
打包 Uniapp
javascript·vue.js·html5
itslife5 小时前
实现 Promise
前端·javascript
yh云想5 小时前
《Java线程池面试全解析:从原理到实践的高频问题汇总》
jvm·面试·职场和发展
橙序员小站5 小时前
搞定系统面试题:如何实现分布式Session管理
java·后端·面试
小鱼儿亮亮5 小时前
canvas中常见问题的解决方法及分析,踩坑填坑经历
前端·canvas
一枚前端小能手5 小时前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack