typescript - Använder "useSelector", "useDispatch" hook i Next.js

Jag studerar Next.js och har några frågor.

Next.js är SSR, så komponenten får props med getInitialProps.

Jag vill lägga till Redux-store i min nästa app, så jag skrev lite kod.

counterAction.ts

const INCREASE = "COUNTER_INCREASE" as const;
const DECREASE = "COUNTER_DECREASE" as const;

const counterIncrease = () => ({
  type: INCREASE,
});

const counterDecrease = () => ({
  type: DECREASE,
});

export default { counterIncrease, counterDecrease };

counterReducer.ts

import counterActions from "../actions/counterActions";
import { HYDRATE } from "next-redux-wrapper";

type CounterAction =
  | ReturnType<typeof counterActions.counterIncrease>
  | ReturnType<typeof counterActions.counterDecrease>
  | { type: typeof HYDRATE };

type CounterState = {
  value: number;
};

const initialState: CounterState = {
  value: 0,
};

const count = (state: CounterState = initialState, action: CounterAction) => {
  switch (action.type) {
    case HYDRATE:
      return { ...state };
    case "COUNTER_INCREASE":
      return { ...state, value: state.value + 1 };
    case "COUNTER_DECREASE":
      return { ...state, value: state.value - 1 };
    default:
      return state;
  }
};

export default count;

store/index.ts

import rootReducer from "./reducers";
import { MakeStore, createWrapper } from "next-redux-wrapper";

const bindMiddleware = (middleware: Middleware[]): StoreEnhancer => {
  if (process.env.NODE_ENV !== "production") {
    const { composeWithDevTools } = require("redux-devtools-extension");
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const makeStore: MakeStore<{}> = () => {
  const store = createStore(rootReducer, {}, bindMiddleware([]));
  return store;
};

export const wrapper = createWrapper<{}>(makeStore, { debug: true });

och lägg till i _app.tsx,

export default wrapper.withRedux(MyApp);

Det fungerar väldigt bra, men är det okej att komma åt denna store med useSelector? Till exempel, detta är min counter.tsx.

import { NextPage } from "next";
import React, { Fragment } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootStore } from "../store/reducers";
import allActions from "../store/actions";

const Counter: NextPage<{}> = () => {
  const count = useSelector((store: RootStore) => store.count.value);
  const dispatch = useDispatch();

  const handleIncrease = () =>
    dispatch(allActions.counterActions.counterIncrease());

  const handleDecrease = () =>
    dispatch(allActions.counterActions.counterDecrease());

  return (
    <Fragment>
      <h1>{count}</h1>
      <button onClick={handleIncrease}>+1</button>
      <button onClick={handleDecrease}>-1</button>
    </Fragment>
  );
};

export default Counter;

I den här koden försökte jag komma åt redux-store med useSelector och useDispatch.

Är detta ren kod i Next.js och fungerar den på produktionsnivå?

Tack för att du läste.

Relaterade artiklar