React-Redux 容器组件的构建流程-JavaScript中文网-JavaScript教程资源分享门户

React-Redux 是一组 React 组件和 Redux 应用程序状态管理库的绑定。容器组件是 React-Redux 组件的核心，它们将 Redux 中的状态（state）转换为 React 组件的属性（props）。在本文中，我们将探讨 React-Redux 容器组件的构建流程，包括如何创建和连接容器组件以及如何在 React 应用程序中有效地使用它们。

创建容器组件

React-Redux 提供了 connect() 函数来创建容器组件。该函数将两个参数传递给组件：mapStateToProps 和 mapDispatchToProps 。

mapStateToProps

mapStateToProps 函数将 Redux 应用程序状态映射到 React 组件的属性。它的返回值是一个对象，用于描述应该提供给组件的属性。

const mapStateToProps = state => {
  return { todos: state.todos }
}

在上面的示例中，mapStateToProps 将 Redux 应用程序状态对象中的 todos 数组映射为组件的属性。

mapDispatchToProps

mapDispatchToProps 函数将 Redux 应用程序中的 dispatch 函数映射到 React 组件的属性。它的返回值是一个对象，描述了应该在组件上提供的操作。

const mapDispatchToProps = dispatch => {
  return {
    addTodo: text => dispatch({ type: 'ADD_TODO', payload: text })
  }
}

在上面的示例中，mapDispatchToProps 将 dispatch 函数映射为组件的属性 addTodo，并将其命名为 ADD_TODO。

创建容器

通过 connect() 函数将这些映射与组件绑定。传递给 connect() 的参数是一个组件本身，例如：

const ContainerComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(PresentationalComponent)

在上面的示例中，ContainerComponent 是一个容器组件，其绑定了 PresentationalComponent，并将 mapStateToProps 和 mapDispatchToProps 映射为其属性。

使用容器组件

现在我们已经知道如何创建容器组件，请看一个使用容器组件的简单示例。假设我们有一个 TodoList 组件，用于显示待办事项列表。它是一个简单的呈现组件，只接受待办事项数组作为属性。

const TodoList = ({ todos }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>{todo.title}</li>
    ))}
  </ul>
)

为了创建容器组件并使用它，我们需要完成以下步骤：

创建 Redux 应用程序

import { createStore } from 'redux'
import { reducer } from './reducer'

const store = createStore(reducer)

创建容器组件

import { connect } from 'react-redux'

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

const ConnectedTodoList = connect(mapStateToProps)(TodoList)

将容器组件通过 React 组件树传递给渲染器。

import ReactDOM from 'react-dom'

ReactDOM.render(
  <ConnectedTodoList />,
  document.getElementById('root')
)

现在，我们的容器组件 ConnectedTodoList 已经可以从 Redux 应用程序状态中加载 todos 属性，并将子组件 TodoList 渲染在屏幕上了。我们还可以通过 mapDispatchToProps，将操作绑定到 ConnectedTodoList 中的属性。

-- -------------------- ---- -------
----- ------------------ - -------- -- --
  -------- ---- -- ---------- ----- ----------- -------- ---- --
--

----- ----------- - -- ------- -- -- -
  ----- --------------- -- -
    ----------------------
    ----- ---- - ------------------------------
    -------------
  ---
    ------ ----------- ---------------- - -------
    ------- --------------------------
  -------
-

----- -------------------- - --------
  -----
  ------------------
--------------

现在，我们可以在 ConnectedTodoList 的渲染中包含这个表单组件。

ReactDOM.render(
  <div>
    <ConnectedTodoList />
    <ConnectedAddTodoForm />
  </div>,
  document.getElementById('root')
)

这个示例中的容器组件演示了如何将 Redux 中的状态和操作映射为 React 应用程序的属性和方法。这是 React-Redux 中容器组件的基本构建流程。

结论

React-Redux 容器组件是 React 应用程序中最基本的组件。使用 connect() 函数，可以将 Redux 应用程序状态映射为 React 组件的属性，并将 dispatch 函数绑定到 React 组件的操作上。掌握容器组件的构建流程是 React-Redux 开发的必要基础。希望通过本文，你能了解 React-Redux 容器组件的完整构建流程，并掌握在 React 应用程序中创建和使用它们的基本技巧。

示例代码

-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------

-- ------
----- --------------- - ----- -- --
  ------ -----------
--

----- ------------------ - -------- -- --
  -------- ---- -- ---------- ----- ----------- -------- ---- --
--

----- ----------------- - ----------------------------------
----- -------------------- - --------
  -----
  ------------------
--------------

-------- ---------- ----- -- -
  ------ -
    ----
      --------------- -- -
        --- -------------------------------
      ---
    -----
  -
-

-------- ------------- ------- -- -
  ------ -
    ----- --------------- -- -
      ----------------------
      ----- ---- - ------------------------------
      -------------
    ---
      ------ ----------- ---------------- - -------
      ------- --------------------------
    -------
  -
-

-------- ----- -
  ------ -
    -----
      ------------------ --
      --------------------- --
    ------
  -
-

-- -- ----- ----
----- ------- - ------ - - ------ -- -- ------- -- -
  ------ ------------- -
    ---- -----------
      ------ -
        ------ -
          ---------------
          -
            --- --------------
            ------ --------------
          -
        -
      -
    --------
      ------ -----
  -
-

----- ----- - --------------------

----------------
  --------- --------------
    ---- --
  ------------
  -------------------------------
-

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67734faf6d66e0f9aae1b801