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

【问题标题】：How to export a variable to make ti dynamic using React Redux如何使用 React Redux 导出变量以使 ti 动态化
【发布时间】：2021-06-23 13:54:05
【问题描述】：

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

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

【问题讨论】：

好的，所以将<a href={url}> 替换为<Link to={`/users/${id}`}>。让用户页面处理自己的操作。
@Frank 我对redux-observable.js.org 不太熟悉，但我试图回答你的问题。如果它不起作用，或者您正在寻找其他东西，请告诉我。
@LindaPaiste 我认为您将a 替换为Link 是正确的。那应该可以解决问题了。
@AjeetShah 是的，您的回答是我的第一个想法，这是对所提问题的正确答案。但我不认为他们提出了正确的问题，因为通过史诗来处理它真的没有必要。
@LindaPaiste 和 AjeetShah 非常感谢你的帮助，我使它与 AjeetShah 的解决方案一起工作谢谢.....

标签： reactjs redux react-redux redux-observable

【解决方案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}`,
        },
      });
    })
  );

【讨论】：

非常感谢我让它工作！