redux-action:用钩子传递axios请求中的参数

Question

我正在使用Redux(thunk(开发React应用程序。

我在这个表中有一个用户列表：

function DataUsers() {
const users = useSelector((state: any) => state.userReducer.infos);
const now = 60;
const history = useHistory();
return (
<div className="tableCardDataUsers">
<Table className="table" bordered hover responsive>
<thead>
<tr className="tableHeader">
<th>ID</th>
<th>Nom</th>
<th>Email</th>
<th>Date de création</th>
<th>Numéro de téléphone</th>
<th>Pourcentage</th>
<th>Catégories</th>
</tr>
</thead>
<tbody>
{users.slice(0, 20).map((item: any, index: number) => (
<tr
className="redirectUser"
onClick={() => history.push("/Utilisateurs")}
key={index}
>
<td>{item.id}</td>
<td>
{item.nom} {item.prenom}
<br></br>Tcheker
</td>
<td>{item.email}</td>
<td>18/10/1998</td>
<td>{item.tel}</td>
<td>
<ProgressBar now={now} label={`${now}%`} />
</td>
<td className="tableCategorie">
<Button
name="VDR"
name2=""
class="catButtonMini"
color="orange"
onclick={() => {}}
type="button"
data=""
image=""
/>
</td>
</tr>
))}
</tbody>
</Table>
</div>
);
}

我想在onClick上获得用户的id，然后调度一个操作，在新页面上显示用户信息。

我做这个动作是为了获得用户信息：

export const getUserById = (id_user: number | string) => {
return async (dispatch: any) => {
dispatch(isLoading(true));
try {
const res = await axios.get(`users/getUserById/${id_user}`);
dispatch(isLoading(false));
dispatch({ type: GET_USER_BY_ID, payload: res.data });
} catch (err) {
console.log(err);
dispatch(isLoading(false));
}
};

我通常在我的组件中使用useSelector来获取这样的数据：

const user = useSelector((state: any) => state.userReducer.getUserById);

我想知道在单击用户单元格以在新用户页面上显示它时，在我的操作中传递id_user的最佳方式是什么。

谢谢

Answer 1

问题是您正试图使用useSelector来调度操作。CCD_ 2用于从存储器中读取数据。

要在redux中调度操作，您需要使用useDispatch。因此，您可以将组件中的代码更改为

import { useDispatch } from "react-redux";
import {getUserById } from 'your path

现在，在您的组件中，您可以进行

const UserInfo = () => {
const dispatch = useDispatch();
// get the user id , either from the store or from url params
useEffect(() => {
dispatch(getUserById(passyourId));
}, [dispatch]);
return <> Your User Info component code goes here </>;
};

参考

使用选择器

使用调度