前端之家

  1. 首页
  2. 问答

独立APIService需要访问redux或NextJS ctx以获取令牌 控制器挂钩意见

• 问答

我有一个独立的APIService.js，可在我的NextJS应用程序中使用它，它可以做一些事情，但是主要的事情是设置BASE_URL以及用户是否已登录（应该在Cookie中或在令牌中标头cookie-然后将其分派到redux中。

基本上，我认为我都需要此APIService；检测机器上是否有cookie（确实存在）或服务器端是否已渲染，并从标头中获取它；或者我认为更好的方法是-监听redux的更改，并从redux存储中获取令牌。

这是我的APIService； 

    import axios from 'axios';
    import { Cookies } from 'react-cookie';
    import { API_URL } from './constants';

    const config = {
      baseURL: API_URL,};
    const cookies = new Cookies();
    const APIService = axios.create(config);

    APIService.interceptors.request.use((request) => {
      const token = cookies.get('token');
      request.headers.Authorization = token ? `Bearer ${token}` : '';
      return request;
    });

    export default APIService;

给出NextJS页面用法的示例；

我的_app.js中有此功能

  static async getInitialProps({ Component,ctx }) {
    if (ctx.isServer) {
      if (ctx.req.headers.cookie) {
        const token = getcookie('token',ctx.req);
        console.log('WHoamI ',token);
        ctx.store.dispatch(reauthenticate(token));
      }
    } else {
      const { token } = ctx.store.getState().authentication;
      console.log('WHoamI2 ',token);
      ctx.store.dispatch(reauthenticate(token));
    }

    return {
      pageProps: Component.getInitialProps
        ? await Component.getInitialProps(ctx)
        : {},};
  }

我是否需要将APIService连接（）到Redux-如果可以，我该怎么办？我通常将APIService导入需要使用API​​的其他组件中，因此除非绝对必要，否则我不想对其进行重大更改。

我确实在页面本身上添加了一个上下文挂钩来调用API客户端，但这仅作为一种变通方法，因为我无法访问APIService中的标头或令牌，因为它没有上下文访问权限。 / p>

所以我可以在页面上添加类似的功能，但是我知道这是一个可怕的解决方案。

useEffect（（）=> {     fetchData（）;   }，[]）;

ip0017 回答：独立APIService需要访问redux或NextJS ctx以获取令牌 控制器挂钩意见

在我们的应用程序中，我们所做的是使服务（尤其是身份验证服务）与Redux分离。

我建议在getInitialProps中继续使用它，而不是直接将其连接到redux。您仍然可以在redux上使用它，也没有任何问题，因为您只需要访问Cookies即可使登录检查生效。它将完成工作并保持简单。

,

我建议使用带有钩子的上下文

控制器

select id,name,value1,avg_value2 value2,date
from (
    select 
        t.*,avg(value2) over(partition by id,name) avg_value2,rank() over(partition by id,name order by date desc) rn
    from mytable t
) t
where rn = 1

挂钩

您的API服务

意见

您可以使用类和上下文控制存储值。 然后可以在react或js项目中重复使用。 React专注于带有钩子的函数式编程。你知道的。

,

我发现，如果您希望Redux始终保持最新状态，则最好为其编写一个reselect选择器。像这样：

import { createSelector } from 'reselect';

const getAuth = (state:AppState) => state.auth;

const getToken = createSelector(getAuth,(auth) => auth.token);

// Easy syntax for class-based services
const getSimpleService = createSelector(getToken,(token) => {
  return new Service(token);
})

// Your sample APIService
const getApiService = createSelector(getToken,(token) => {
    const config = {
      baseURL: API_URL,};
    const APIService = axios.create(config);

    APIService.interceptors.request.use((request) => {
      request.headers.Authorization = token ? `Bearer ${token}` : '';
      return request;
    });

    return APIService;
})

现在，您的组件可以通过connect()获取API！我的经验是使用React而不是Next，但是Redux代码应该几乎相同。将API服务重构为一个类也可能很方便，因为您可以将所有axios设置保留在其构造函数中。

axiosnext.jsreactjsredux
本文链接：https://www.f2er.com/3144691.html

大家都在问