首先你需要了解 redux 如何与 React 配合使用的总体情况。
在此之前，我们首先了解什么是智能组件和哑组件。
智能组件
- 所有的代码逻辑都需要在这里处理
- 它们也称为容器。
- 他们与商店（又名状态管理）交互以更新您的组件。
哑组件
- 他们只是从你的容器中读取 props 并渲染你的组件
- 这只是 UI 视图，不应包含任何逻辑。
- 所有的样式/html/css 都在你的愚蠢组件中。
Here这是一篇很棒的文章，如果您仍然有疑问，可以阅读它来了解智能组件和愚蠢组件。
好的，现在让我们尝试了解 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>
)
}
}
Reducer
export default function todos(state={},action) {
switch (action.type) {
case 'RECEIVE_TODOS':
return Object.assign(state,action.todos);
}
}
action
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 文档，您会看到 actions 返回对象，那么我将如何调用返回函数而不是对象的 api。为此，我使用了 redux thunk，你可以阅读here.
我给你举了一个例子，你可以在其中获取待办事项。如果您想要执行其他操作，例如删除 Todo、添加Todo、修改 Todo，那么您可以在适当的组件中执行此操作。
- DeleteTodo - 您可以在 TodoListContainer 中执行。
- 添加Todo - 您可以在TodoListContainer 中执行。
- 更改状态（已完成/待定）- 您可以在 TodoListContainer 中执行。
- 修改Todo - 您可以在TodoContainer 中执行。
您还可以查看here详细的例子，但在此之前我想说的是应该先了解一下 redux 的基础知识，你可以找到here
P.S：我即时编写了代码，因此它可能无法正常工作，但只需稍加修改即可工作。
