Блог

Главная - Вопросы по программированию - Правильный способ использования изменений в Nextjs?

Правильный способ использования изменений в Nextjs?

#redux #next.js

Вопрос:

Я пытаюсь создать сайт для ведения блога с помощью Nextjs, я хочу извлекать данные из API, сохранять их в глобальном хранилище и вызывать необходимые компоненты. Я хочу знать правильный правильный способ его реализации?

Это мой магазин,

 import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import { DevReducer } from "./reducers/devReduce";
import { createWrapper } from "next-redux-wrapper"

const makeStore = () => createStore(DevReducer, composeWithDevTools(applyMiddleware()));

export const wrapper = createWrapper(makeStore)

После того, как я позвоню wrapper в _app.ts файл,

 import App from "next/app";
import Head from "next/head";
import { useDispatch, useSelector } from "react-redux";
import { ThemeProvider } from "styled-components";
import { light, dark } from "../styles/theme";
import { wrapper } from "../redux/store";
import "../styles/globals.css";
import { fetchAPI } from "../lib/api";
import { getGlobal } from "../redux/actions/actions";
import { getStrapiMedia } from "../lib/media";
import React from "react";

function MyApp({ Component, pageProps }) {
  const dispatch = useDispatch();
  const { global } = pageProps;
  dispatch(getGlobal(global));
  const theme = useSelector((state: any) => state.theme);

  return (
    <>
      <Head>
        <link rel="shortcut icon" href={getStrapiMedia(global.favicon)} />
        <title>{global.siteName}</title>
      </Head>
      <ThemeProvider theme={theme ? dark : light}>
        <Component {...pageProps} />
      </ThemeProvider>
    </>
  );
}

MyApp.getInitialProps = async (ctx: any) => {
  const appProps = await App.getInitialProps(ctx);
  const global = await fetchAPI("/global");
  return { ...appProps, pageProps: { global } };
};

export default wrapper.withRedux(MyApp);

Я могу сохранить данные , полученные в initialprops , и использовать их в различных компонентах? Но я хочу знать, правильно ли это называть dispatch или useselector в каком-либо компоненте?

Метки: