写一个大背景吧：
我为什么会去学习这个Redux？或许是因为我在使用 React hooks 中的useReducer时突然被刺激到了吧～的确仿照官网 demo，都可以用上这些 API，但我却从来不理解我为什么要去用？何时去用？我想着，是时候去学习了Redux了吧～
好了～开始记录学习过程吧～
相关文档
Redux 介绍
1. 理解它存在的意义
比如有个页面组件树类似这个样子，一个层级特别深的 O 组件，更改后要去同步更改 A 组件。在传统的 React 中，将 props 层层传递，似乎可以解决问题～那么继续假设，随着业务增加，组件树变得日益壮大，组件之间的联系变得更加紧密，某一天你会突然发现，自己似乎已经不清楚组件之间的 state 是如何变化更新的。而你也无法预料到，修改这个组件的 state 之后，下一刻，别的地方又会发生什么？
Redux 就是为了解决这个问题的，它试图让 state 的变化变得可预测。2. 什么时候使用呢？
那么这里我直接引入官方文档的这篇 when-should-i-use-redux，原文是英文的，所以我稍微翻译了一下；大体是以下几个情况：
- 在 App 中，有许多应用页面的 state 需要在多处使用。
- App 中的 state 频繁需要更新。
- 更新 state 的逻辑很复杂。
- App 具有中等或大型的代码库，并且是多人开发的。
- 你需要知道 state 随着时间变化是如何在更新的。
然后就可以自主选择是否真正需要去使用 Redux 啦～如果你只是想多学一门技术，当然也是可以哒～
Redux 三大原则
-
单一数据源
整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。 -
State 是只读的
唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。 -
使用纯函数来执行修改
为了描述 action 如何改变 state tree ，你需要编写 reducers。
Redux 工作流程图
对于这张工作流程图，我在网上参考了很多，最后这种展示我认为是比较好理解的。或许一开始，还是会觉着陌生，但是随着学习的深入，就会越来越理解。
简单解释一下吧：
对于页面上的组件，需要进行更新时。我们需要主动去发起一个 action，调用
dispatch(action)，来通知到 Store。Store 自动会去触发 reducer，根据之前的 state 和传入的 action，进行相关处理后，就会返回一个新的 state。而组件呢，就会根据最新的 getState()进行页面展示。Redux 核心介绍
1. Action
本质是一个 JS 的对象，类似 {type: 'Add'}。其中 type 属性是必须的，它定义了当前的操作的类型，例如是添加，修改等等。除了 type 字段呢，其它的字段结构，可以由自己决定。
这里呢，我拿添加一个 Todo 进行举例：
// define action type
const ADD_TODO = 'ADD_TODO';
// define action creator function
const addTodo = (text) => {
return {
type: ADD_TODO,
text
}
}
// trigger by clicking button
const clickAddButton = () => {
const action = addTodo('add the first todo')
dispatch(action)
}
是不是很简单，其实主要的就是那一句话dispatch(action)，其余的代码只是提了一个常量和封了一个方法而已。
2. Reducer
首先明确一点，它是一个纯函数。它接收旧的 state 和 action，返回新的 state。形如 (prevState, action) => newState
纯函数定义：
1. 如果函数的调用参数相同，则永远返回相同的结果。 它不依赖于程序执行期间函数外部任何状态或数据的变化，必须只依赖于其输入参数。
2. 该函数不会产生任何可观察的副作用，例如网络请求，输入和输出设备或数据突变（mutation）。
在上一步中，用户发起了添加一个 todo 操作之后，redux 会自动去调用这个 reducer 方法，它通常长这样哦：
// define initial state
const initialState = {
todos: []
}
/* @params
* state: get previous state here
* action: dispatch params, defined by user
*/
function reducer(state = initialState, action) {
switch (action.type) {
case ADD_TODO:
return Object.assign({}, state, {
todos: [
...state.todos,
{
text: action.text,
completed: false
}
]
})
default:
return state
}
}
3. Store
再次强调一下 Redux 应用只有一个单一的 store。它有以下职责：
- 维持应用的 state；
- 提供 getState() 方法获取 state；
- 提供 dispatch(action) 方法更新 state；
- 通过 subscribe(listener) 注册监听器;
- 通过 subscribe(listener) 返回的函数注销监听器。
通常创建一个 store 非常的简单方便；
import { createStore } from 'redux'
// reducer is defined last step
const store = createStore(reducer)
目前为止，我想说的一些关于 redux 的前期知识储备已经结束。初次接触，肯定还是会很混乱。个人一直很想整理一篇实战部分的练习，但是无奈自己太懒惰了，以及不懂咋整理，就先这样搁置着了... 【下次一定？？？】
网友评论