React – Redux 学习之表现组件和容器组件

我们一般会用到 表现组件容器组件.

表现组件

我们一般认为表现组件的目的仅仅是通过获得的Props 来渲染页面.例如我在学习制作一个TodoList时.
Redux在这里维护一个List数组,而我需要通过action来获取该List.
因此我们会有表现组件TodoList, 如下:

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import Todo from './Todo'

class TodoList extends Component {
    render () {
        //
        const todos = this.props.todos
        const { toggleTodo, removeTodo } = this.props.actions
        //
        return (
            
    { todos.map( todo => { return toggleTodo(todo.id)} remove={() => removeTodo(todo.id)} /> }) }
) } } TodoList.propTypes = { todos: PropTypes.array, actions: PropTypes.object } export default TodoList

该组件不含任何Redux公共状态部分的内容. 其中,我们可以看到,表现组件需要三个Props.
对应的是 todos Array, 和一个actions. 里面包含了两个交互方法toggle()remove()

OK, 那么我们接下来就需要对该表现组件包裹一个容器组件, 容器组件的目的就是通过Redux的状态来为表现组件提供交互数据.
例如下面这个FilterList:

import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import todoList from './TodoList'
import {toggleTodo, removeTodo} from '../store/action'

const getVisibleTodos = (todos, filterState) => {
    switch( filterState ) {
        case 'SHOW_COMPLEATED':
        return todos.filter(todo => todo.completed)
        case 'SHOW_ACTIVE':
        return todos.filter(todo => !todo.completed)
        case 'SHOW_ALL':
        default:
        return todos
    }
}

const mapStateToProps = state => ({
    todos: getVisibleTodos(state.todos, state.visibleFilters)
})

const mapDispathToProps = dispatch => ({
    actions: bindActionCreators({ toggleTodo, removeTodo }, dispatch)
})

export default connect(mapStateToProps, mapDispathToProps)(todoList)

我们可以通过以上看到,该组件甚至不包含React标签和内容.该容器组件仅仅用作给子组件提供交互数据Props

OK, 那我可以理解为.

在任何需要Redux状态的地方,我都可以轻松将该组件设置为子组件,而外面包裹一个容器组件来为期配置交互数据Props.
这样,表现组件不需要做任何修改,他仅仅关注属性和内部渲染的实现.至于状态不和表现组件有任何关系!

在容器组件中的connect()中挂载需要的子组件,因为如代码所示,我挂载了todoList组件作为子组件

《React – Redux 学习之表现组件和容器组件》上有3条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注