Redux 智能组件与笨组件

一, 智能组件与笨组件

笨组件:

• 只负责 UI 的呈现，不带有任何业务逻辑
• 没有状态（即不使用this.state这个变量）
• 所有数据都由参数（this.props）提供
• 不使用任何 Redux 的 API

智能组件:

• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态
• 使用 Redux 的 API

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它

二, connect()

connect() 此方法作用是生成智能组件, 在笨组件外层加一个包裹
此智能组件同时担任两个重要的作用

• （1）输入逻辑：外部的数据（即state对象）如何转换为 UI 组件的参数
• （2）输出逻辑：用户发出的动作如何变为 Action 对象，从 UI 组件传出去。

负责完成这个两个功能的方法分别是,

• mapStateToProps
• mapDispatchToProps

一个connect方法的完整 API如下:

import { connect } from 'react-redux'

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)

VisibleTodoList 则是由 Redux 生成的智能组件, TodoList 是笨组件.
这里通过 mapStateToProps 把显示数据传入 TodoList, 同时通过 mapDispatchToProps 确定了那些笨组件发起什么样的action, 这里可以是函数, 也可以是对象

三, mapStateToProps

• mapStateToProps 是一个函数,
• 此函数返回一个对象 ,里面的每一个键值对就是一个映射
• 第一个参数为 state 对象 , 第二个参数，代表智能组件的 props对象
• 使用 state 对象做参数后, 当 state 更新时, 会自动执行，重新计算 笨组件的参数，从而触发 笨 组件的重新渲染。
• 使用 props对象作为第二个参数时, 当智能组件参数发生变化，也会引发 笨 组件重新渲染

const mapStateToProps = (state, ownProps) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter),
    active: ownProps.filter === state.visibilityFilter
  }
}

getVisibleTodos()计算后的结果作为 建 todo的值, 然后传入笨组件

四: mapDispatchToProps()

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

• 它可以是一个函数，也可以是一个对象。

当时一个函数时,

• 返回一个对象, 键值对定义了 UI 组件的参数怎样发出 Action。
• 有两个参数 dispatch发起action的方法 , props对象智能组件的 props的对象

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

当时一个对象时,

它的每个键名也是对应 笨 组件的同名参数，键值应该是一个函数，会被当作 Action creator ，返回的 Action 会由Redux自动发出。

上例可为:

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

<Provider>组件

React-Redux 提供Provider组件，可以让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')
)

子组件就可以通过 const { store } = this.context; 拿到 store,
store.getState() 拿到 state,

class VisibleTodoList extends Component {
......
  render() {
    const props = this.props;
    const { store } = this.context;
    const state = store.getState();
    // ...
  }
}