Question

我正在学习 Next.js，有一些问题。

Next.js 是 SSR，因此组件使用 getInitialProps 获取 props。

我想在我的下一个应用中添加 redux store，所以我写了一些代码。

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 });

并添加 _app.tsx,

export default wrapper.withRedux(MyApp);

效果很好，但是可以使用 useSelector 访问这家商店吗？ 例如，这是我的 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;

在这段代码中，我尝试使用 useSelector 和 useDispatch 访问 redux 存储。

这是 next.js 中的干净代码吗？它是否在生产级别工作？

感谢阅读。

在 Next.js 中使用“useSelector”、“useDispatch”钩子

0 个答案: