如何在Next.js中使用redux tk中使用cookie
#javascript #redux #typescript #nextjs

有时您需要在Next.js中使用 auth令牌从后端获取数据，该数据仅适用于具有授权的用户，然后从 redux 通过 getServersideProps 。

我们知道，用户的身份令牌可以存储在 cookie 中。

在本文中，您将学习如何获取 cookie 并将它们存储在 redux 存储 getserversideprops 中，然后获取数据客户端的第一个渲染。

注意：这不仅对Auth令牌很有用，还可以使用它来存储任何字符串，例如网站的主题。

初始化Redux Store

让我们从安装redux的库开始。

yarn add @reduxjs/toolkit react-redux next-redux-wrapper

或

npm install @reduxjs/toolkit react-redux next-redux-wrapper

对于Redux Store，我们将使用以下结构：

/store
    // your-reducers/slices
    /store/configureStore.js

configurestore.js 

import { configureStore } from '@reduxjs/toolkit';
import { createWrapper } from 'next-redux-wrapper';

const store = configureStore({
  reducer: {}, // Here goes your reducer
});

export const wrapper = createWrapper(() => store);

export default store;

然后我们将添加商店提供商。

页面/_app.js

从'react-redux'import {provider};
导入{wrapper}来自'@/store/configurestore'; 

export default function App({ Component, pageProps }) {
  const { store, props } = wrapper.useWrappedStore(pageProps);

  return (
    <Provider store={store}>
      <Component {...props.pageProps} />
    </Provider>
  );
}

饼干

对于使用cookie，我们将安装 cookie-next 

yarn add cookies-next

或

npm install cookies-next

现在，我们可以使用Next-redux-wrapper在所有页面中使用 getServersideProps ，让我们在主页中尝试。

页面/index.js 

import { getCookies } from 'cookies-next';
import { wrapper } from '@/store/configureStore';

export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req, res }) => {
  const cookies = getCookies({ req, res }); // Get cookies in server side

  store.dispatch({ // Dispatch GET_COOKIES action
    type: 'GET_COOKIES',
    payload: {
      cookies, // Send the cookies in GET_COOKIES action
    },
  });

  return {
    props: {},
  };
});

首先，让我们确保在 cookie 中存在auth令牌。

import { setCookie } from 'cookies-next';

setCookie('auth_token', 'XXXXXXXXXXXXXX');

然后，我们需要为还原器/切片创建一个初始状态，然后从cookie中获得cookie的auth_token。

import { getCookie } from 'cookies-next';

const initialState = {
  authToken: getCookie('auth_token') || '',
};

还原/切片

我已经准备了两个示例，首先是还原，第二个是 slice

还原器 

import { createReducer } from '@reduxjs/toolkit';

const auth = createReducer(initialState, (builder) => {
  builder
    .addCase('GET_COOKIES', (state, { payload }) => {
      const { cookies } = payload;

      state.authToken = cookies.auth_token;
    })

    .addDefaultCase((state) => state);
});

切片 

import { createSlice } from '@reduxjs/toolkit';

const auth = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    // ...
  },
  extraReducers: {
    GET_COOKIES: (state, { payload }) => {
      const { cookies } = payload;

      state.authToken = cookies.auth_token;
    },
  },
});

结论

我们研究了在redux商店中使用cookie的主题。当然，现在您可以集成验证令牌存储逻辑在服务器端，这意味着无需将cookie通过每个页面的道具传递。