今天我们来总结一下有关于 Redux 的知识，这一部分我也了解甚少，因为用的时候都是直接用，下面进行知识总结。

Redux 是什么

Redux 其实是一个的状态管理库，或者可以说是一个状态容器，它可以集中管理应用的状态和逻辑。

Redux 核心概念

1. State

State 是驱动应用的真实数据源头，我们可以用 state ：

描述应用程序在特定时间点的状况
渲染 View
当某事件发生时，state 会根据发生事件进行更新，生成新的 state
基于新的 state 重新渲染 View

这就是 Redux 的单项数据流（one-way data flow），以下列举一个最简单的计数器例子：

function Counter() {

// State: a counter value

const [counter, setCounter] = useState(0)

// Action: 当事件发生后，触发状态更新的代码

const increment = () => {

setCounter(prevCounter => prevCounter + 1)

}

// View: UI 定义

return (

<div>

Value: {counter} <button onClick={increment}>Increment</button>

</div>

)

}

2. Action

action 是具有 type 字段的普通 JavaScript 对象，可以简单的视作为描述应用程序发生了什么的事件。

当然也可以包含一些其他字段，比如有关事件的附加信息，我们通常把这些信息放在 payload 中，如：

const addTodoAction = {
    type: 'todo/todoAdded',
    payload: 'Buy milk'
}

所以我们也可以简单的理解为 Action = type + payload

3. Reducer

reducer 是一个函数，它接收当前的 state 和一个 action 对象，必要时决定何时更新状态，并返回新的状态。

它的使用必须符合以下规则：

仅使用 state 和 action 参数计算新的状态值
禁止直接修改 state，必须通过复制现有的 state 并对复制的值进行修改来做不可变更新（immutable updates）
不能使用异步逻辑、依赖随机值或导致其他副作用的代码

4. Dispatch

dispatch 是 Redux store 的一个方法，更新 state 的唯一方法就是调用 store.dispatich()并传入一个 action 对象，store 将执行所有 reducer 函数并计算出更新后的 state，此时调用 getState() 就可以获取新的 state：

store.dispatch({ type:'counter/increment'})

console.log(store.getState())

dispatch 里的 aciton 可以理解为触发一个事件，这是 Reducer 就会像事件监听器一样，当它们收到关注的 action 后，就会更新 state，通常可以使用 action creator 来调用 action

5. MiddleWare

middleWare 可以在接收请求和生成相应之间放置一些代码，比如在 Express 或者 Koa 中间件中添加 CORS 标头、记录日志等，而且中间件可以像 Promise 一样连成了链。

其中比较常用的中间件就是 redux-thunk 和 redux-promise，分别实现了函数和 Promise 的实现。

React-Redux 核心概念

React-Redux 是 Redux 官方的 react 绑定库，能够让我们的 react 组件从 Redux state 中读取数据，并且向 store 分发 aciton 以更新数据。

1. connect()

connect() 方法可以让组件和 store 连接起来，它会返回一个新的、被连接了的组件，接收四个参数：

connect([mapStateToProps],[mapDispatchToProps],[mergeProps],[options])

2. mapStateToProps

它是一个函数，如果 connect 指定了这个参数，那么新的组件会向 Redux store 订阅更新，那么 store 一旦更新，mapStateToProps 就会被调用，它接收两个参数，第一个参数就是 store state，第二个参数是传递给连接组件的 props。

3. mapDispatchToProps

它可以被声明为接收两个变量，第一个是 dispatch，第二个就是传递给连接组件的 props。

总结

我平时使用到 Redux 的情况比较少，所以暂时只是看了官方文档来进行一些比较重要的点的总结，此外我还另外自己尝试封装了一个功能较为简单的 redux，感兴趣的话也可以看一下，链接在此。

前端基础知识之 Redux