Question

Which Redux function is used to create a container component?

#redux

Answer

The connect() function, but it's provided by the React bindings for Redux (react-redux), not Redux (redux).

// containers/VisibleTodoList.js

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

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

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(
  mapStateToProps,
  mapDispatchToProps
)(TodoList)
// Notice that the VisibleTodoList container depends on the presentational
// TodoList component

export default VisibleTodoList

https://redux.js.org/basics/usage-with-react#implementing-container-components

Learn

Author

xavi

Reviews
Last
next

Students 1