[React] 13 - Redux: react-redux

Ref: Redux 入门教程（三）：React-Redux 的用法

组件拆分规范

使用 React-Redux，需要掌握额外的 API，并且要遵守它的组件拆分规范。

React-Redux 将所有组件分成两大类：

UI 组件负责 UI 的呈现，就是conponent。
容器组件负责管理数据和逻辑，就是container。

如果一个组件既有 UI 又有业务逻辑，那怎么办？

将它拆分成下面的结构：

* 外面是一个容器组件，　　　　----> 前者负责与外部的通信，将数据传给后者　　----> 由 React-Redux 自动生成

* 里面包了一个UI 组件。　　　 ----> 后者渲染出视图　　----> 由用户提供

connect函数

一、 UI 组件 --> 容器组件

connect方法，用于从 UI 组件生成容器组件。connect的意思，就是将这两种组件连起来。

import { connect } from 'react-redux'

const VisibleTodoList【容器组件】 = connect(mapStateToProps, mapDispatchToProps)(TodoList【UI组件】)

代码解析

(1) 一个页面可能会有十个state，使用connect让我们只关注当前有使用的几个。

(2) 尾部的参数的意思：因为返回的是一个带参数的func，参见: js 用闭包实现 curry化

二、connect的两个参数

mapStateToProps

建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。

- 第一个参数，总是state对象

/**
  * 参数state代表的是 整个网页的“状态”。
  */
const mapStateToProps = (state) => {

  return {

    todos: getVisibleTodos(state.todos, state.visibilityFilter)　　　　// 从state算出 todos 的值 ---->

  }

}

从state算出 todos 的值。

const getVisibleTodos = (todos, filter) => {

  switch (filter) {

    case 'SHOW_ALL':

      return todos

    case 'SHOW_COMPLETED':

      return todos.filter(t => t.completed)

    case 'SHOW_ACTIVE':

      return todos.filter(t => !t.completed)

    default:

      throw new Error('Unknown filter: ' + filter)

  }

}

- 第二个参数，代表容器组件的props对象

// 容器组件的代码

//    <FilterLink filter="SHOW_ALL">

//      All

//    </FilterLink>

const mapStateToProps = (state, ownProps) => {

  return {

    active: ownProps.filter === state.visibilityFilter

  }

}

使用ownProps作为参数后，如果容器组件的参数发生变化，也会引发 UI 组件重新渲染。

connect方法可以省略mapStateToProps参数，那样的话，UI 组件就不会订阅Store，就是说 Store 的更新不会引起 UI 组件的更新。

mapDispatchToProps

建立映射：(外部的) state对象 ====> (UI 组件的) props对象

建立映射：UI 组件的参数 ====> store.dispatch方法

定义了哪些用户的操作应该当作 Action，传给 Store。

const mapDispatchToProps = (

  dispatch,

  ownProps

) => {

  return {

    onClick: () => {

      dispatch({

        type: 'SET_VISIBILITY_FILTER',

        filter: ownProps.filter

      });

    }

  };

}

思考题：有了connect -> react-reduct，就不需要：Every listener registered with store.subscribe(listener) will now be invoked.

Provider 组件

一、原理

connect方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。

一种解决方法是将state对象作为参数，传入容器组件。但是，这样做比较麻烦，尤其是容器组件可能在很深的层级，一级级将state传下去就很麻烦。

React-Redux 提供Provider组件，可以让容器组件拿到state。其实就是在讲下图。

二、放在共享位置里

利用React组件的context属性，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

import { Provider }    from 'react-redux'

import { createStore } from 'redux'

import todoApp         from './reducers'

import App             from './components/App'

let store = createStore(todoApp);

render(　　

  <Providerstore={store}>　　// <----------- 这里就是重点！

    <App />

  </Provider>,

  document.getElementById('root')

)

三、从共享位置获取

子组件就可以从context拿到store

/* 容器组件，visibleTodoList */
class VisibleTodoList extends Component {

  componentDidMount() {

    const { store } = this.context;

    this.unsubscribe = store.subscribe(() =>

      this.forceUpdate()

    );

  }

  render() {

    const props     = this.props;

    const { store } = this.context;

    const state     = store.getState();

    // ...

  }

}

VisibleTodoList.contextTypes = {

  store: React.PropTypes.object

}

实例代码研究

Ref: jackielii/simplest-redux-example

Ref: redux/examples/counter/

Ref: bbandydd/serverless-client-s3 　　【看上去未来会有用】

--------------------------------------------------------------------------------------------

Ref: bbandydd/React_Startkit　　　　【代码讲解】

Ref: [線上讀書會] andy workshop 一天入魂 react-redux【五个小时~】

一、效果图

3

+-

二、代码结构

Redux组件拆分

从 3:34:05 / 5:14:37 开始讲解代码。

container 和 component 的区别

container：更新状态；从redux's state去取，与redux沟通。

component：画面如何呈现 based on props，不用redux。

Jeff: 下图可见，number & increment放在了”外面“。

三、代码分析

Step 1. 从Panel开始

---> main.js中的标签<Panel />

[container/Panel.js]

---> Panel组件的具体实现。

---> 前者写起来简单些。

export default Panel;

import Panel from '../';

export const Number;

import {Number} from 'Panel';

Step 2. 组件分离

Step 3. 发送动作信号

== 先提出一个疑点 ==

原始方式：状态的改变（onClick事件在panel里）

Redux方式：状态的改变要放在action中，也就是，onClick实则在this,props传来的action中。

== 创建动作 ==

视频讲解 - 4:01:40 / 5:14:37

点击按键，触发action，只是发了一个信号。如下，发了一个INCREMENT signal.

[actions/counterAction.js]

Step 4. 接收动作信号

== 执行动作 ==

去reducer中去验证，即：计算新状态（硬拷贝）。

状态 object + 负载 object ==> 新的状态 object。

[reducers/counterReducer.js]

Step 5. 创建 store

== 合并动作 ==

创建 store，将总的reducer作为参数进行了”绑定“。

[store/configureStore.js]

Step 6. 两种组件的连接

视频讲解 - 4:30:46 / 5:14:37

如有没有这个参数，所有的state就全部给了Panel（contrainer角色）处理；

有这两个参数，就是”只处理“当前用到的。

export default connect(mapStateToProps, mapDispatchToProps)(Panel);

解决什么问题？

下图 line 17 为何能方便地直接获取 ”当下所需“ 的变量，这便是 connect 的功劳。

== 第一个参数 ==

line 31, 表示所有的state。return的就是其中需要用到的。

== 第二个参数 ==

line 39，相当于替代了 dispatch(counterAction)。

Step 7. 容器直接获得 store

[main.js]

configureStore 就是 createStore() 的地方。

四、添加新功能

有了Redux框架，新功能的添加就成了体力活，这也是 Redux 框架的优势和迷人的地方。

按钮UI组件添加

Btn里这个button set里，继续添加一个button。

动作信号添加

注意：这里取代了dispatch(...)方法，为什么能这样呢？详见Step 6。

状态更新方法添加

使用“按钮UI组件”处添加

在Panel.js中 (container) 添加对应的使用方式。