上一篇介绍了 react-router，今天介绍 redux。
什么是 Redux？
现如今，我们的项目都是由一个一个的模块组成的，组件化的思想更适合大且复杂的项目。
在此之前，React 并不适合写大型应用，因为它当时还没有很好地解决组件之间的通信问题。
为了解决这个问题，2014 年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。2015 年，Redux 出现，将 Flux 与函数式编程结合在一起，很短时间内就成为了最热门的前端框架。
什么时候需要 Redux？
有人说过，挺有道理的哈。
如果你不知道是否需要 Redux，那就是不需要它。
在以下场景你可以考虑使用它：
- 组件间需要共享状态
- 状态需要在任何地方都能拿到
- 一个组件需要改变另一个组件的状态
- 一个组件需要改变全局状态
*以上内容引自阮一峰老师的博客，本教程是为了接入而接入，哈哈。
Redux 设计思想
- Web 应用是一个状态机，View 与 State 是一一对应的。
- 所有的状态，保存在一个对象里面。
基本概念和 API
先了解一下以下几个概念吧
-
Store：保存数据的容器。由
Redux提供的createStore函数来生成唯一的Store对象。 -
State：
Store对象包含的数据。当前的状态，可通过store.getState()获取。Redux 规定一个State对应一个View。 -
Action：
View发出的动作（如用户点击鼠标等行为）通知State要发生改变。Action是改变State的唯一办法。它是一个对象，其中type属性是必须的，表示Action的名称，其他属性可以自由设置，其社区有一个规范可以参考。如const action = { type: 'SOMETHING_TODO', payload: 'SOME DATA' }。 -
Action Creator：生成
Action的函数。当有若干Action时，全部手写可能略显麻烦，可以定义一个函数来生成Action，这种函数叫做Action Creator。 -
store.dispatch()：是
View发出Action的唯一方式。 -
Reducer：当
Store收到Action之后，必须返回一个新的State，这样View才会发生变化，这种State的计算过程叫做Reducer。它是一个纯函数。 -
Pure Function：即纯函数，同样的输入，必定得到同样的输出，且没有任何副作用
-
store.subscribe()：监听
State的变化，一旦State发生变化，就自动执行这个函数。它返回一个函数，执行该返回函数就解除监听。
实现最简单的 Store 案例
先安装 redux 依赖。
$ yarn add redux@4.0.4
在 src/js/store 目录下新建一个 index.js 文件。
// store/index.js
import { createStore } from 'redux'
// Reducer 处理函数
const reducer = (prevState, action) => {
const { type, payload } = action
switch (type) {
case 'ADD':
// 一定要不能修改 state，而是返回一个新的副本
// 倘若 state 是引用数据类型，一定要借助 Object.assign、对象展开运算符(...)、其他库的拷贝方法或者自己实现深拷贝方法，返回一个新副本
return prevState + payload
case 'SUB':
return prevState - payload
default:
// default 或者未知 action 时，返回旧的 state
return prevState
}
}
// 初始值
const initialState = 0
// 创建 Store（也可以不传入 initialState 参数，而将 reducer 中的 state 设置一个初始值）
const store = createStore(reducer, initialState)
// 监听 state 变化
// const unsubscribe = store.subscribe(() => {
// console.log('监听 state 变化', store.getState())
// })
// 解除监听
// unsubscribe()
export default store
我们在 Home 组件引入 Store，并修改成：
// pages/home/index.js
import React, { Component } from 'react'
import store from '../../store'
class Home extends Component {
constructor(props) {
super(props)
this.state = {}
}
// Action Creator 函数
actionCreator(type, payload) {
return { type, payload }
}
handle(type, val) {
// 创建 Action
const action = this.actionCreator(type, val)
// 派发 Action
store.dispatch(action)
// 获取 State 快照
console.log(`当前操作是 ${type}，State 为：${store.getState()}`)
}
render() {
return (
<div>
<h3>Home Component!</h3>
<button onClick={this.handle.bind(this, 'ADD', 1)}>加一</button>
<button onClick={this.handle.bind(this, 'SUB', 1)}>减一</button>
</div>
)
}
}
export default Home
上面案例，我们做了一个很简单的加减操作。
通过 redux 提供的 createStore 函数创建了唯一的一个 store 对象，该函数接收三个参数 createStore(reducer, [preloadedState], enhancer) ，其中第一第二个分别是 reducer 函数和初始值，第三个一般是使用中间件时用到，我们后面会用到，这里暂不展开探讨。（点这里了解更多）
Reducer 函数接收两个参数 reducer(state, action)，分别是 previousState（旧状态） 和 Action。在首次执行 state 为 undefined，可以为它设置一个初始值，或者在 createStore 中传入。它有点类似 Array.prototype.reduce()。
借助我们在 Home 组件下引入 store，并添加两个按钮，对 store 的 state 做加减操作。
🎉
至此
我们最简单 redux 案例实现了，但是这个距离我们想要的，还不够哦。
在此抛出几个问题：
- 如何接入我们的 Component 了，当 state 发生变化时，使其自动更新 View？
- 组件如何共享 Store？
- 如何查看 State 的变化？
下文继续，未完待续…
网友评论