React之Redux

一、Redux

前两章介绍了props和state，当时有说到，对于大量的组件需要共用同一条数据时，使用props传递是非常麻烦的事情，所以出现了Redux

Redux设计思想

1. Web 应用是一个状态机，视图与状态是一一对应的。

2. 所有的状态，保存在一个对象里面。

Redux原则

• 唯一数据源
• 保持状态只读
• 数据改变只能通过纯函数完成

Redux API

1. store

用于保存数据，一个应用只有一个store

创建方法：

createStore(fn)

返回新生成的store

2. state

store对象包含所有的数据

const state = store.getState()

一个state对应一个view

3. Action

用户需要改变数据时，操作不到state，只能改变view，所以Action相当于一个消息，运数据到store，通知state变化

Action是一个对象类型，用于描述当前发生的事情，表现形式如下：

const action = {
  type: 'ADD_TODO', //表示action的名称
  payload: 'Learn Redux'//携带的字符串信息
};

Action creator 生成Action

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = '添加 TODO';

function addTodo(text) { //Action creator
  return {
    type: ADD_TODO,
    text
  }
}

const action = addTodo('Learn Redux');

store.dispatch() view发出Action的唯一方法

store.dispatch() 接受一个Action对象作为参数，将它发送出去

import { createStore } from 'redux';
const store = createStore(fn);

store.dispatch({
  type: 'ADD_TODO',
  payload: 'Learn Redux'
});

结合 Action Creator，这段代码可以改写如下。

store.dispatch(addTodo('Learn Redux'));

4. Reducer

strore收到action时，需要对view作出变化，这时，就是需要给出一个新的state，就需要Reducer来作出计算。

Reducer是一个函数，接受两个参数；

• 当前state
• action

const defaultState = 0;
const reducer = (state = defaultState, action) => {
  switch (action.type) {
    case 'ADD':
      return state + action.payload;
    default: 
      return state;
  }
};

const state = reducer(1, {
  type: 'ADD',
  payload: 2
});

上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。

实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

import { createStore } from 'redux';
const store = createStore(reducer);

上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。

工作流程

1. 用户操作视图发出action，
2. Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。
3. state变化，store会调用监听函数，通过store.getState()得到当前状态，触发重新渲染view
   

二、react-redux

ui组件和容器组件

react-redux是redux的一个库，将所有组件分为两大类，ui组件和容器组件

• ui组件
  • 负责ui的实现，不负责业务逻辑
  • 咩有state，即状态
  • 所有数据由props提供
  • 不使用redux的api
• 容器组件
  • 负责管理数据和业务逻辑
  • 由state内部状态
  • 使用redux的api

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

conect

（1）connect代码结构

import hoistStatics from 'hoist-non-react-statics'
export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) { // ...
return function wrapWithConnect(WrappedComponent) { // ...
class Connect extends Component { // ...
render() { // ...
if (withRef) {
this.renderedElement = createElement(WrappedComponent, {
...this.mergedProps, ref: 'wrappedInstance'
})
} else {
this.renderedElement = createElement(WrappedComponent, this.mergedProps
) }
return this.renderedElement }
}
// ...
return hoistStatcis(Connect, WrappedComponent);
} }

connect 函数本身返回名为 wrapWithConnect 的函数，而这个函数才是真正用来 装饰 React 组件的。而在我们装饰一个 React 组件时，其实就是把组件在 Connect 类的 render 方 法中进行渲染，并获取 connect 中传入的各种额外数据。

connect是用来连接ui组件和逻辑组件
connect需要两个参数

• mapStateToProps，输入逻辑，即建立state对象到props对象的映射关系
• mapDispatchToProps，输出逻辑，即建立ui组件的参数到store.dispatch方法的映射

输入逻辑：即外部数据（state对象）->ui组件的参数
输出逻辑：通过用户操作定义action对象，传给store

mapStateToProps

• connect的第一个参数，定义了我们需要从 Redux 状态树中提取哪些部分当作 props 传给当前 组件

• mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。当然也可以传入一个函数，原因是在 connect 的第一个参数里利用函数闭包进行一些复杂计 算的缓存，从而实现效率优化的目的。

• mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表 UI 组件的同名参数，后面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}
//函数
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)
  }
}

mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

mapDispatchToProps()

• mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射，它可以是一个函数，也可以是一个对象
• 它接受 store 的 dispatch 作为第一个参数，同时接受 this.props 作为可选的第 二个参数。

作为函数时

有两个参数dispatch和props
返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。

const mapDispatchToProps = (
  dispatch,
  ownProps
) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}

作为对象时

通过定义一个方法，自动返回action

const mapDispatchToProps = {
  onClick: (filter) => {
    type: 'SET_VISIBILITY_FILTER',
    filter: filter
  };
}

provider

connect方法生成容器组件后，需要通过provider拿到state对象

import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

上面代码中，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

参考文章： https://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html