如何使用 React Redux 导出变量以使 ti 动态化

问题描述

我有一个问题，因为我想使用一个变量来使 url 动态化

我有一个名为 usersEpic.ts 的 Epic，它通过 ID 提供用户信息

  export const readUserById = (action$,state$) =>
  action$.pipe(
    ofType(READ_USER),mergeMap((action: { type: string; payload: any }) => {
      return requestEpic({
        actionType: READ_USER_SUCCESS,method: 'GET',url: `http://localhost:3000/users/1`,//HERE I NEED TO IMPORT THE ID TO BE DYNAMIC
        headers: {
          'Content-Type': 'application/json','Authorization': `Bearer ${state$.value.accountReducer.activeUserAccount.accesstoken}`
        },})
    })
  )

我有另一个名为 interns.tsx 的页面，它使用地图呈现所有用户。

import React,{ useState,useCallback } from "react";
import { usedispatch,useSelector } from "react-redux";
import { LOAD_USERS } from "../../components/store/reducers/usersReducer";

export default function Users() {
  const dispatch = usedispatch();
  const users = useSelector((state) => state.usersReducer.users);

  React.useEffect(() => {
    dispatch({
      type: LOAD_USERS,});
  },[]);

  return (
    <div>
      <div className="container">
        <h1 className="dataText">Interns</h1>
        <div className="center-item">
          <div>
            <table>
              <thead>
                <tr>
                  <th>Number</th>
                  <th>Name</th>
                  <th>Lastname</th>
                  <th>Email</th>
                  <th>Option</th>
                </tr>
              </thead>
              {users.map((item) => {
                let id = item.id;
                const url = `http://localhost:3001/users/${id}`;
                return (
                  <tbody>
                    <tr>
                      <td>{item.document}</td>
                      <td>{item.name}</td>
                      <td>{item.lastname}</td>
                      <td>{item.email}</td>
                      <td className="icons">
                        <a href={url}>
                          <i className="fas fa-info-circle icon"></i>
                        </a>
                        <a href={url}>
                          <i className="fas fa-user-edit icon"></i>
                        </a>
                        <a href="/users/readUser">
                          <i className="fas fa-power-off icon green"></i>
                        </a>
                      </td>
                    </tr>
                  </tbody>
                );
              })}
            </table>
          </div>
        </div>
      </div>
    </div>
  );
}

我想将 id = item.id 变量从 interns.tsx 导出到 usersEpic.ts 以将其用作动态值。

如果有人可以帮助我非常感谢

解决方法

您可以创建一个点击处理程序，您可以将 id 传递给该处理程序并分派类型为 READ_USER 的操作和具有 id 的负载：

function handleUserClick(id) {
  dispatch({
    type: READ_USER,payload: { id },// passing the id in payload
  });
}

...

<td className="icons">
  <i
    className="fas fa-info-circle icon"
    onClick={() => handleUserClick(item.id)}
  ></i>
...

并从epic中的有效载荷中获取id：

export const readUserById = (action$,state$) =>
  action$.pipe(
    ofType(READ_USER),mergeMap((action: { type: string; payload: any }) => {
      return requestEpic({
        actionType: READ_USER_SUCCESS,method: "GET",url: `http://localhost:3000/users/${action.payload.id}`,// HERE,reading the id from the payload
        headers: {
          "Content-Type": "application/json",Authorization: `Bearer ${state$.value.accountReducer.activeUserAccount.accessToken}`,},});
    })
  );