Why call connect function without mapStateToProps or mapDispatchToProps as args?

Question

In one of the Redux examples from the docs the connect function is called with no args. This can be seen at the bottom of the example.

import React from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../actions'

let AddTodo = ({ dispatch }) => {
let input

return (
  <div>
    <form onSubmit={e => {
      e.preventDefault()
      if (!input.value.trim()) {
        return
      }
      dispatch(addTodo(input.value))
      input.value = ''
    }}>
      <input ref={node => {
        input = node
      }} />
      <button type="submit">
        Add Todo
      </button>
    </form>
  </div>
 )
}

AddTodo = connect()(AddTodo)

export default AddTodo

From my understanding the purpose of the connect function it to give container components access to actions dispatchers in the form of callbacks aswell as access to state from the store in the form of props.

Therefore it doesn't make sense as to why you would call connect without specifying the state and action creators that you want to give the component access to.

Answer 1

connect()(AddTodo) will pass dispatch as a prop to AddTodo component, which is still useful even without state or predefined actions.

Redux (and react-redux) is a pretty low-level library. It allows you to be very strict about what state and actions a component has access to, or you can pass the entire store and every action to every component, and everything in between.

It's up to you to decide what level of strictness is appropriate for your application.

Why use connect at all, you may ask? Well connect just passes store / dispatch through React context so you don't have to pass the store through many components. You don't have to use connect though. Any module / HOC pattern could work, connect just happens to be a convenient thing to use.