想知道如何在react-redux中将功能组件编写为类组件

Question

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getTodoList } from "./redux/action/todoList";

使用我所编写的功能组件的方式与我们在类组件中编写的方式相同

function App() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(getTodoList());
}, []);
const todoList = useSelector((state) => state.todoList);
console.log(todoList);
return (
<div className="App">
{todoList.data.length > 0
? todoList.data.map((obj) => {
return (
<>
<div className="card">
<div className="content">
<div className="header">{obj.title}</div>
</div>
</div>
</>
);
})
: ""}
</div>
);
}
export default App;

Answer 1

要将redux存储连接到组件，可以使用connect API。根据文档

connect函数接受两个可选参数:

• mapStateToProps:每次存储状态改变时调用。它接收整个存储状态，并且应该返回该组件所需的数据对象。

• mapDispatchToProps:这个参数可以是一个函数，也可以是一个对象。

  • 如果它是一个函数，它将在组件创建时被调用一次。它将接收dispatch作为参数，并且应该返回一个对象，该对象中充满了使用dispatch来分派动作的任务。

  • 如果它是一个充满动作创建器的对象，每个动作创建器将变成一个prop函数，在调用时自动调度它的动作。注意:我们建议使用这种"对象简写"形式。

你的代码将被这样修改。

const mapStateToProps = (state, ownProps) => ({
todoList: state.todoList
});
const mapDispatchToProps = (dispatch) => ({
todoList: dispatch(getTodoList())
});
// `connect` returns a new function that accepts the component to wrap:
const connectToStore = connect(mapStateToProps, mapDispatchToProps);
// and that function returns the connected, wrapper component:
const ConnectedApp = connectToStore(App);
// We normally do both in one step, like this:
connect(mapStateToProps, mapDispatchToProps)(App);