React Redux 中组件和容器的区别

在React Redux中，组件和容器是两个重要的概念，它们在应用程序中扮演着不同的角色。组件是负责展示数据和处理用户交互的部分，而容器则是负责管理数据状态和与Redux进行交互的部分。本文将详细介绍React Redux中组件和容器的区别，并通过案例代码来进一步说明。

javascript
import React from 'react';
const TodoItem = ({ todo, completeTodo, deleteTodo }) => {
  return (
    
      
        {todo.text}
      
       completeTodo(todo.id)}>
        Complete
      
       deleteTodo(todo.id)}>
        Delete
      
    
  );
};
export default TodoItem;

javascript
import React from 'react';
import { connect } from 'react-redux';
import TodoItem from './TodoItem';
const TodoList = ({ todos, completeTodo, deleteTodo }) => {
  return (
    
      {todos.map(todo => (
                  key={todo.id}
          todo={todo}
          completeTodo={completeTodo}
          deleteTodo={deleteTodo}
        />
      ))}
    
  );
};
const mapStateToProps = state => {
  return {
    todos: state.todos
  };
};
const mapDispatchToProps = dispatch => {
  return {
    completeTodo: id => dispatch({ type: 'COMPLETE_TODO', id }),
    deleteTodo: id => dispatch({ type: 'DELETE_TODO', id })
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);