redux 动作：使用钩子在 axios 请求中传递参数

Question

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

我有一个用户列表 table :

    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 来分派操作。 useSelector是从store中读取数据。

要在 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 </>;
};

参考

useSelector

useDispatch

redux 动作：使用钩子在 axios 请求中传递参数

redux action : pass parameter in axios request with hooks

reactjs

redux

redux-thunk