首先，您需要了解 redux 如何与 react 协同工作的整体图景。

在开始之前，让我们先了解什么是智能组件和哑组件。

智能组件

1. 你所有的代码逻辑都需要在这里处理
2. 它们也称为容器。
3. 它们与商店（又名状态管理）交互以更新您的组件。

哑组件

1. 他们只是从你的容器中读取props并渲染你的组件
2. 这只是 UI 视图，不应包含任何逻辑。
3. 所有样式/html/css 都在您的愚蠢组件中。

这是一篇很棒的文章，如果您仍有疑问，可以阅读它以了解智能和愚蠢的组件。

好的，现在让我们尝试了解 redux 的工作原理：-

• 您的智能组件（又名容器）与您的 redux 存储交互
• 您从容器中触发动作。
• 你的行为调用你的 api
• 您的操作结果通过减速器更新商店
• 您的容器通过 mapStateToProps 函数读取存储，一旦存储中的值发生变化，它就会更新您的组件。

现在让我们考虑您的待办事项示例

TodoListContainer.js

class TodoListContainer extends Component {

  componentWillMount () {
    // fire you action action
  }


  render () {
    return (
      <Todos todos=={this.props.todos} />
    )
  }
}


function mapStateToProps(state) {
  const {todos} = state;
  return {
    todos;
  }
}

export default connect(mapStateToProps)(TodoListContainer)

TodoList.js

class TodoList extends Component {

  renderTodos() {
    return this.props.todos.map((todo)=>{
      return <Todo todo={todo} key={todo.id} />
    })
  }

  render () {
    return () {
      if (this.props.todos.length === 0) {
        return <div>No todos</div>
      }
      return (
        <div>
          {this.renderTodos()}
        </div>
      )
    }
  }
}

export default class TodoList

Todo.js

class Todo extends Component {

  render () {
    return (
      <div>
        <span>{this.props.todo.id}</span>
        <span>{this.props.todo.name}</span>
      </div>
    )
  }
}

减速器

export default function todos(state={},action) {
  switch (action.type) {
    case 'RECEIVE_TODOS':
       return Object.assign(state,action.todos);
  }
}

行动

function fetchTodos() {
  return(dispatch) => {
      axios.get({
    //api details
    })
    .then((res)=>{
      dispatch(receiveTodos(res.todos))
    })
    .catch((err)=>{
      console.warn(err)
    })
  }
}

function receiveTodos(todos) {
  return {
    type: 'RECEIVE_TODOS',
    todos
  }
}

现在，如果您已阅读 redux 文档，您会看到操作返回对象，那么我将如何在那里调用我的 api，它返回一个函数而不是一个对象。为此，我使用了 redux thunk，你可以在这里阅读。

我给了你一个例子，你可以在其中获取待办事项。如果您想执行其他操作，例如 deleteTodo、addTodo、modifyTodo，那么您可以在适当的组件中执行此操作。

1. DeleteTodo - 您可以在 TodoListContainer 中进行。
2. 添加Todo - 您可以在TodoListContainer 中进行。
3. 更改状态（已完成/待处理） - 您可以在 TodoListContainer 中进行。
4. ModifyingTodo - 您可以在 TodoContainer 中进行。

您也可以在此处查看详细示例，但在此之前我会说应该先了解 redux 的基础知识，您可以在此处找到

PS：我即时编写了代码，因此它可能无法正常工作，但只需稍加修改即可工作。