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

Redux 的构成

我们知道，redux 由 Store、Reducer、Action三个部分组成。其中，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的方法就是触发Action，Action是一个用于描述已发生事件的普通对象。

这样做有几个好处：

action仅表达修改意图，视图和网络请求都不能直接修改state，不会出现修改顺序的问题。
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 生命周期

我们调用store.dispatch(action);

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

Redux store调用传入的reducer函数

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

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

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

把多个计算结果统一

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

得到结果

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

redux 基础概念--redux（1）

Redux 的构成

一些使用原则

store 唯一

State 只读

使用纯函数来执行修改

特性

单向数据流

redux 生命周期