React实战篇——四、在React中使用Redux

四、在React中使用Redux

1，Redux可以和很多库一起用，为了方便在React中使用Redux，我们需要单独安装react-redux

2，展示组件和容器组件

展示组件负责应用的UI展示，也就是组件如何渲染，具有很强的内聚性。展示组建不关心渲染时使用的数据是如何获取到的，它只要知道有了这些数据后，组件应该如何渲染就足够了。

容器组件负责应用逻辑的处理，如发送网络请求、处理返回数据，将处理过的数据传递给展示组件使用等。容器组件还提供修改源数据的方法，通过展示组件的props传递给展示组件，当展示组件的状态变更引起源数据变化时，展示组件通过调用容器组件提供的方法同步这些变化。

展示组件和容器组件可以自由嵌套。

注意！展示组件和容器组件是根据组件意图划分的，无状态组件和有状态组件是根据组件内部是否使用state划分组件。通常情况下，展示组件是通过无状态组件实现的，容器组件是通过有状态组件实现的，但是展示组件也可以是有状态组件。，容器组件也可以是无状态组件。

3，connect

react-redux提供了一个connect函数，用于把React组件和Redux的store连接起来，生成一个容器组件，负责数据管理和业务逻辑：

import {connect } from 'react-redux'
import TodoList from './TodoList'
const VisibleTodoList = connnect(mapStateToProps,mapDispatchToProps)(ToList)

创建了一个VisibleTodoList，可以把组件TodoList和Redux连接起来，mapStateToProps负责从全局应用状态state中取出所需数据，映射到展示组件的props，mapDispatchToProps负责把需要用到的action映射到展示组件props上。

4，mapStateToProps

将state转换成props，state就是Redux store中保存的应用状态，它会作为参数传递给mapStateToProps，props就是被连接的展示组件的props。

function 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)
    }
}
function mapStateToProps(state){
    return {
        todos: getVisibleTodos(state.todos,state.visibilityFilter)
    }
}

每当store中的state更新时，mapStateToProps就会重新执行，重新计算传递给展示组件的props，从而触发组件的重新渲染。

注！store中的state更新一定会使mapStateToProps重新执行，但不一定触发组件的render，如果mapStateToProps新返回的对象和之前的对象浅比较相等，shouldComponentUpdate方法就会返回false，不会触发render.

connect可以省略mapStateToProps参数，这样state更新就不会引起组件重新渲染。

mapStateToProps除了接收state参数外，还可以使用第二个参数，代表容器组件的props对象，例如：

function mapStateToProps(state,ownProps) {
}

5，mapDispatchToProps

mapDispatchToProps接收store.dispatch方法作为参数，返回展示组件用来修改state的函数：

function toggleTodo(id){
    return {
        type: 'TOGGLE_TODO',
        id
    }
}
function mapDispatchToProps(dispatch) {
    return {
        onTodoClick: function (id) {
            dispatch(toggleTodo(id))
        }
    }
}

展示组件内调用this.props.onTodoClick(id)发送修改待办事项状态的action。与mapStateToProps相同，mapDispatchToProps也支持第二个参数，代表容器组件的props

6，Provider组件

Provider组件需要接收一个store属性，然后把store属性保存到context（组件通信），Propvider组件通过context把store传递给子组件，所以使用Provider组件时，一般把它作为根组件，这样内层任意组件可以从context获取store对象：

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

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