一: redux 基础知识和 react-redux

 

三个基本原则

 

数据流

 

在 React 应用中使用 Redux（react-redux）

 

redux 三个基本原则

 

整个应用只有唯一一个 Store 实例

 

State 只能通过触发 Action 来更改

 

State 的更改 必须写成纯函数(Reducer)，(oldState, action) => newState，也就是每次更改总是返回一个新的 State

 

redux 两个显著的特点

 

可预测性（Reducer 是纯函数）。

 

扩展性强（middleware）。

 

单向数据流

 

Actions 是 store.dispatch(action)，它是每次数据改变的源头。

 

如果有 middleware 将先进入 middleware

 

Reducer 管理 state, 也就是 (oldState, action) => newState 的集合。

 

当 state 改变后, View Provide 就会更改视图

 

连接 React (react-redux)

 

使用 Provider 在根组件 注入 Store

 

容器组件使用 connect() 方法连接 Redux

 

1. 使用 Provider 在根组件 注入 Store

 

2. 容器组件使用 connect() 方法连接 Redux

 

那么我们如何获取容器组件的依赖呢？

 

容器组件及其子组件需要的两个能力：

 

读数据：获取 redux 的 state

 

改数据：向 redux dispatch actions

 

使用步骤1

 

mapStateToProps：从 store 的 state 里把容器组件依赖的部分 state 取出来，成为组件的 props。

 

mapDispatchToProps： 将特定的 dispatch 函数取出来变为 props 。

 

注： bindActionCreators 将 ActionCreator 和 store 的 dispatch 绑定到一起，返回一个特定的 dispatch 函数，组件调用即可触发 store.dispatch(action)

 

使用步骤2

 

在 render 等函数里面 取出相应 props，自己使用或者传给子组件

 

分离容器组件和展示组件

 

redux 的重要思想：分离容器组件和展示组件。

 

容器组件

 

在应用中，只有 最顶层组件是对 Redux 可知。

 

展示组件

 

应该是“笨拙”的，是通过父组件传递的 props 来获取数据和更改数据的 dispatch，它是感知不到 redux 存在的，具有很强的复用性。