Redux入门教程（三）：react-redux使用（todolist实例）

一、组件分类

React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。

UI 组件：

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

容器组件：

• 负责管理数据和业务逻辑，不负责 UI 的呈现
• 带有内部状态，可以将状态通过props给子组件
• 使用 Redux 的 API

React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，我们只写UI组件，而顶层容器是通过调用一个方法来生成的，具体如何生成？请继续看。

二、connect()方法

React-Redux 提供了connect方法，用于将 UI 组件包装成容器组件。
但是正如我们刚才提到的，顶层容器是要有状态有业务逻辑的，因此在connect方法生成顶层容器时，我们就应该把所需要的状态和业务逻辑定义好并提供给connect。
因此，connect方法的完整 API 如下。

import { connect } from 'react-redux'

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

其中，connect方法接受两个参数：mapStateToProps和mapDispatchToProps。它们定义了 UI 组件的业务逻辑。前者负责输入逻辑，即将state映射到 UI 组件的参数（props），后者负责输出逻辑，即将用户对 UI 组件的操作映射成 Action。

二、mapStateToProps()方法

mapStateToProps是一个函数。它的作用就是建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。也就是拿一部分有用的state，映射到当前容器组件的props中，以便于通过props直接引用。

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

作为函数，mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。请看下面的例子：

//取一部分state给当前的顶层容器用
const mapStateToProps = (state) => {
    return {
        todos: getVisibleTodos(state.todos, state.visibilityFilter)
    }
};
//根据todos和visibilityFilter的值来计算状态，映射给当前container的props
const getVisibleTodos = (todos, filter) => {
    switch (filter) {
        case 'SHOW_ALL':
            return todos;
        case 'SHOW_COMPLETED':
            return todos.filter(t => t.complete);
        case 'SHOW_ACTIVE':
            return todos.filter(t => !t.complete);
        default:
            throw new Error('Unknown filter: ' + filter)
    }
};

如上代码，可以通过this.props.todos直接获取到需要的状态值，且todos变化时，容器重新渲染。

三、mapDispatchToProps()方法

mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。Action可以是一个函数，也可以是一个对象。
当需要派发action时，只需要调用this.props下的方法就可以调用dispatch派发action了。

//将事件绑定到顶层容器props，调用props.事件时可以直接派发action到store，进行状态修改
const mapDispatchToProps = (
    dispatch
) => {
    return {
        setFilter: (filter) => {
            dispatch({
                type: 'SET_VISIBILITY_FILTER',
                filter: filter
            });
        },
        addTodo: (content) => {
            dispatch({
                type: 'ADD_TODO',
                content: content,
                id:i++
            });
        },
        toggleTodo: (id)=>{
            dispatch({
                type: 'TOGGLE_TODO',
                id: id
            });
        }
    };
};

我们知道，redux单向数据流需要有store，action，dispatch，reducer，目前为止store一直未出现，还请继续向下看。

四、 组件

connect方法生成容器组件时，我们定义了一堆的逻辑和状态，而只有顶层容器能拿到store的时候才有意义，因此需要让容器组件拿到store的state对象。

React-Redux 提供Provider组件，可以让组件树中的任意一个容器组件拿到state。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from "./redux/reducers";
let store = createStore(reducers);

ReactDOM.render(
    
        
    , document.getElementById('root')
);

五、实例：TodoList

经典的TodoList效果图如下：

20190212_172832.gif

先来看一下项目结构：

image.png

index.js中provider包裹组件，代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from "./redux/reducers";
let store = createStore(reducers);

ReactDOM.render(
    
        
    , document.getElementById('root')
);

文件夹说明

src>containers>TodoList---顶层容器文件夹，
src>containers>TodoList>TodoList.js---顶层容器组件，
src>containers>TodoList>components---UI组件文件夹，其下是UI组件文件，
src>redux>reducers---用于构建store的reducer函数，

TodoList:

import React, { Component } from 'react';
import AddTodo from './components/AddTodo'
import VisibleTodoList from './components/VisibleTodoList'
import Filter from './components/Filter'
import {connect} from "react-redux";

let i=0;
class TodoList extends Component {
    constructor(props){
        super(props);
    }
    render() {
        return (
            

                
                
                
            
        );
    }
}

//取一部分state给当前的顶层容器用
const mapStateToProps = (state) => {
    return {
        todos: getVisibleTodos(state.todos, state.visibilityFilter)
    }
};
//根据todos和visibilityFilter的值来计算状态，映射给当前container的props
const getVisibleTodos = (todos, filter) => {
    switch (filter) {
        case 'SHOW_ALL':
            return todos;
        case 'SHOW_COMPLETED':
            return todos.filter(t => t.complete);
        case 'SHOW_ACTIVE':
            return todos.filter(t => !t.complete);
        default:
            throw new Error('Unknown filter: ' + filter)
    }
};

//将事件绑定到顶层容器props，调用props.事件时可以直接派发action到store，进行状态修改
const mapDispatchToProps = (
    dispatch
) => {
    return {
        setFilter: (filter) => {
            dispatch({
                type: 'SET_VISIBILITY_FILTER',
                filter: filter
            });
        },
        addTodo: (content) => {
            dispatch({
                type: 'ADD_TODO',
                content: content,
                id:i++
            });
        },
        toggleTodo: (id)=>{
            dispatch({
                type: 'TOGGLE_TODO',
                id: id
            });
        }
    };
};

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

完整代码请查看：https://github.com/Amy-Tong126/react-redux-demo