Reactjs 使用REST端点和可重用组件响应Redux组件

我正在做一个React Redux（带钩子）项目，其中我有一个具有不同端点的baseURL。比如说

• baseURL=”https://jsonplaceholder.typicode.com"
• endpoints=“/posts”、“/comments”、“/albums”

我有两个问题：

在react（comments）组件中保留端点的位置（例如：“/comments”）

如何为其他组件（如帖子和相册）重用代码，因为所有组件的accessToken代码和头都是相同的

const accessToken=localStorage.getItem（“accessToken”）；
Cookies.set（“XSRF-TOKEN”、Cookies.get（“XSRF-TOKEN”）；
变量bodyParameters={
页码：1，
页面大小：50，
};
返回fetch（baseURL{
证书：“包括”，
方法：“张贴”，
body:JSON.stringify（bodyParameters），
标题：{
授权：`JWT${accessToken}`，
“X-XSRF-TOKEN”：Cookies.get（“XSRF-TOKEN”），
“缓存控制”：“无缓存”，
pragma：“无缓存”，
}，

重用api配置的想法，包括baseURL、accesstoken等类似的东西

const readList = (resource) => apiService.get(resource) 

readList('/posts');
readList('/comments');
readList('/albums');

您将拥有一个名为

apiService

的服务：您可以在其中管理fetch配置（如标头），还可以在其中添加令牌。

apiService

将返回REST函数：POST/PUT/GET/DELETE/PATCH和可用标头配置

例如：

const customFetch = (path, options) => {
    const accessToken = localStorage.getItem("accessToken");
    Cookies.set("XSRF-TOKEN", Cookies.get("XSRF-TOKEN"));
    var bodyParameters = {
        page: 1,
        pageSize: 50
    };

    return fetch(`${baseURL}/${path}`, {
        credentials: "include",
        headers: {
            Authorization: `JWT ${accessToken}`,
            "X-XSRF-TOKEN": Cookies.get("XSRF-TOKEN"),
            "cache-control": "no-cache",
            pragma: "no-cache"
        },
        ...options
    });
};

const post = (path, bodyParameters) =>
    customFetch(path, {
        method: "POST",
        body: JSON.stringify(bodyParameters)
    });

const get = (path, queries) =>
    customFetch(queries ? `${path}/${qs.stringify(queries)}` : path, {
        method: "GET"
    });

const put = (path, bodyParameters) =>
    customFetch(path, {
        method: "PUT"
        body: JSON.stringify(bodyParameters)
    });

const delete = (path, id) =>
    customFetch(`${path}/${id}`, {
        method: "DELETE"
    });

之后，您可以像这样使用动态端点自定义

readList

const readList = (resource) => apiService.get(resource) 

readList('/posts');
readList('/comments');
readList('/albums');