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

Question

我有一个问题，因为我想使用一个变量来使 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 以将其用作动态值。

如果有人能帮助我非常感谢

Answer 1

您可以创建一个点击处理程序，您可以向其传递 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>
...

并获取 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}`,
        },
      });
    })
  );

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

How to export a variable to make ti dynamic using React Redux

reactjs

redux

react-redux

redux-observable