如何解决如何使用 React Redux 导出变量以使 ti 动态化
我有一个名为 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}`,},});
})
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。