Redux/React组件能否分离展示层与逻辑层？官方文档绑定方式存疑

Great question! You absolutely can separate the presentational and logical layers in Redux + React applications—in fact, this is a widely recommended pattern to boost code clarity, reusability, and maintainability. The official Redux docs sometimes show simplified, combined code for brevity, but splitting these concerns is absolutely possible (and encouraged).

Let’s break this down with the AddTodo component example you referenced.

First: The "Mixed" Version (As Seen in Docs) #

Here’s the typical combined code where logic and presentation are tangled:

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

Solution 1: Split into Presentational + Container Components #

The classic approach is to split into two distinct components:

1. Presentational Component: Handles only UI rendering, no Redux interaction. It receives data and callbacks as props.
2. Container Component: Manages Redux logic (dispatching actions, selecting state) and passes props to the presentational component.

Step 1: Create the Presentational Component

// components/AddTodoForm.js
import React from 'react'

// This component only cares about rendering the form and calling the passed callback
const AddTodoForm = ({ onAddTodo }) => {
  let input

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

export default AddTodoForm

Step 2: Create the Container Component

// containers/AddTodo.js
import { connect } from 'react-redux'
import { addTodo } from '../actions'
import AddTodoForm from '../components/AddTodoForm'

// Map Redux dispatch to a prop the presentational component can use
const mapDispatchToProps = dispatch => ({
  onAddTodo: text => dispatch(addTodo(text))
})

// Connect the container to Redux and wrap the presentational component
export default connect(null, mapDispatchToProps)(AddTodoForm)

Solution 2: Use Custom Hooks (Modern Approach) #

With React-Redux hooks like useDispatch, you can encapsulate logic in custom hooks instead of container components, keeping your presentational components clean:

Step 1: Create a Custom Hook for Logic

// hooks/useAddTodo.js
import { useDispatch } from 'react-redux'
import { addTodo } from '../actions'

// Encapsulate all Redux-related logic here
export const useAddTodo = () => {
  const dispatch = useDispatch()
  
  return (text) => {
    if (!text.trim()) return
    dispatch(addTodo(text))
  }
}

Step 2: Use the Hook in the Presentational Component

// components/AddTodoForm.js
import React from 'react'
import { useAddTodo } from '../hooks/useAddTodo'

const AddTodoForm = () => {
  let input
  const addTodo = useAddTodo() // Get the logic from the hook

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

export default AddTodoForm

Why This Matters #

• Clearer Responsibilities: Presentational components focus on "how things look," while logic is centralized in containers or hooks.
• Reusability: You can reuse the AddTodoForm component elsewhere with a different onAddTodo callback (no Redux dependency!).
• Easier Testing: You can test the presentational component with mock props, and test the logic separately without rendering UI.
• Maintainability: Changes to Redux logic don’t require touching UI code, and vice versa.

So to answer your question: Yes, we absolutely can (and should!) separate these layers. The official docs show combined code for simplicity, but splitting concerns is a core best practice for scalable Redux apps.

内容的提问来源于stack exchange，提问作者Max Wolfen