面试题：React组件与Redux集成中的数据流向问题

数据从action创建到最终更新UI的完整流程：
- Action 创建：
  - 应用中某个交互（如用户点击按钮等）触发 action 的创建。action 本质上是一个普通的 JavaScript 对象，它描述了发生的事件。例如，在一个待办事项应用中，用户点击“添加待办事项”按钮，会触发一个 ADD_TODO 类型的 action，该 action 对象可能包含待办事项的具体内容等信息。
- Action 分发：
  - 创建的 action 通过 store.dispatch() 方法进行分发。dispatch 是 Redux store 提供的一个方法，用于将 action 发送到整个应用中。
- Reducer 处理：
  - Redux store 接收到分发的 action 后，会将其传递给相应的 reducer。reducer 是一个纯函数，它接受当前的 state 和 action 作为参数。例如，对于 ADD_TODO action，相应的 reducer 会根据 action 中的待办事项内容，返回一个新的 state，这个新的 state 包含了新添加的待办事项。
  - reducer 根据 action 的类型和内容，对 state 进行更新。需要注意的是，reducer 必须是纯函数，不能有副作用，并且必须返回一个新的 state，而不是直接修改旧的 state。
- Store 更新：
  - reducer 返回的新 state 会更新 Redux store 中的 state。此时，Redux store 中的 state 已经是包含了最新变化的状态。
- UI 更新：
  - 连接到 Redux store 的 React 组件会检测到 state 的变化。通常，通过 React - Redux 库提供的 connect 函数（在新的版本中可以使用 useSelector 和 useDispatch 钩子）来连接 React 组件与 Redux store。
  - 当 Redux store 中的 state 发生变化时，这些连接的 React 组件会重新渲染，从而将最新的 state 反映到 UI 上。例如，在待办事项应用中，新添加的待办事项会显示在列表中。

React 组件的 props 和 Redux 的 store 之间的交互：

从 Redux store 到 React 组件 props：

使用 React - Redux 库，通过 connect 函数（或者 useSelector 钩子）将 Redux store 中的部分 state 映射为 React 组件的 props。例如：

在旧的方式中，使用 connect 函数：

import React from'react';
import { connect } from'react - redux';

const MyComponent = ({ todoList }) => {
  return (
    <div>
      {todoList.map(todo => (
        <p key={todo.id}>{todo.text}</p>
      ))}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    todoList: state.todoList
  };
};

export default connect(mapStateToProps)(MyComponent);

在新的方式中，使用 useSelector 钩子：

import React from'react';
import { useSelector } from'react - redux';

const MyComponent = () => {
  const todoList = useSelector(state => state.todoList);
  return (
    <div>
      {todoList.map(todo => (
        <p key={todo.id}>{todo.text}</p>
      ))}
    </div>
  );
};

export default MyComponent;

这样，Redux store 中的 state.todoList 就作为 props.todoList 传递给了 MyComponent，组件可以根据这个 prop 来渲染相应的 UI。

从 React 组件 props 到 Redux store：

通过 connect 函数（或者 useDispatch 钩子）将 action 创建函数映射为 React 组件的 props。例如：

在旧的方式中，使用 connect 函数：

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

const AddTodoComponent = ({ addTodo }) => {
  const [newTodoText, setNewTodoText] = React.useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTodo(newTodoText);
    setNewTodoText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={newTodoText}
        onChange={(e) => setNewTodoText(e.target.value)}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    addTodo: (text) => dispatch(addTodo(text))
  };
};

export default connect(null, mapDispatchToProps)(AddTodoComponent);

在新的方式中，使用 useDispatch 钩子：

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

const AddTodoComponent = () => {
  const [newTodoText, setNewTodoText] = React.useState('');
  const dispatch = useDispatch();

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(addTodo(newTodoText));
    setNewTodoText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={newTodoText}
        onChange={(e) => setNewTodoText(e.target.value)}
      />
      <button type="submit">Add Todo</button>
    </form>
  );
};

export default AddTodoComponent;

这样，组件通过 props （旧方式）或直接通过 dispatch（新方式）来分发 action，从而触发 Redux store 中的 state 更新。

面试题：React组件与Redux集成中的数据流向问题

知识考点

面试题答案