Nextjs - 等待 store.dispatch 无法读取未定义的属性“调度”

Question

我是 React、Redux 的新手，并且一直在关注有关该主题的教程。我遇到了很多我能够解决的问题，但我遇到了一个我无法解决的问题。我设置了商店，甚至可以通过 Chrome 的 Redux 工具查看它并正确显示，但是当我尝试发送到商店时，我总是收到无法读取未定义错误的属性“发送”。我已经逐信遵循了许多教程，但仍然遇到相同的错误消息。

Index.Js

import Layout from '../components/layout/Layout';
import Home from '../components/Home';
import { getRooms } from '../redux/actions/roomActions';

import { wrapper } from '../redux/store';

export default function Index() {
  return (
    <Layout>
      <Home />
    </Layout>
  );
}

export const getServerSideProps = wrapper.getServerSideProps(
  async ({ req, store }) => {
    await store.dispatch(getRooms(req));
  }
);

roomConstants.js

export const ALL_ROOMS_SUCCESS = 'ALL_ROOMS_SUCCESS';
export const ALL_ROOMS_FAIL = 'ALL_ROOMS_FAIL';

export const CLEAR_ERRORS = 'CLEAR_ERRORS';

reducer.js

import { combineReducers } from 'redux';
import { allRoomsReducer } from './roomReducers';

const reducer = combineReducers({
  allRooms: allRoomsReducer,
});

export default reducer;

Store.js

import { createStore, applyMiddleware } from 'redux';
import { HYDRATE, createWrapper } from 'next-redux-wrapper';
import thunkMiddleware from 'redux-thunk';
import reducers from './reducers/reducers';

const bindMiddleware = (middleware) => {
  if (process.env.NODE_ENV !== 'production') {
    const { composeWithDevTools } = require('redux-devtools-extension');
    return composeWithDevTools(applyMiddleware(...middleware));
  }
  return applyMiddleware(...middleware);
};

const reducer = (state, action) => {
  if (action.type === HYDRATE) {
    const nextState = {
      ...state,
      ...action.payload,
    };
    return nextState;
  } else {
    return reducers(state, action);
  }
};

const initStore = () => {
  return createStore(reducer, bindMiddleware([thunkMiddleware]));
};

export const wrapper = createWrapper(initStore);

roomReducer.js

import {
  ALL_ROOMS_SUCCESS,
  ALL_ROOMS_FAIL,
  CLEAR_ERRORS,
} from '../constants/roomConstants';

// All rooms reducer
export const allRoomsReducer = (state = { rooms: [] }, action) => {
  switch (action.type) {
    case ALL_ROOMS_SUCCESS:
      return {
        roomsCount: action.payload.roomsCount,
        resPerPage: action.payload.resPerPage,
        filteredRoomsCount: action.payload.filteredRoomsCount,
        rooms: action.payload.rooms,
      };

    case ALL_ROOMS_FAIL:
      return {
        error: action.payload,
      };

    case CLEAR_ERRORS:
      return {
        ...state,
        error: null,
      };

    default:
      return state;
  }
};

roomAcion.js

import axios from 'axios';
import absoluteUrl from 'next-absolute-url';

import {
  ALL_ROOMS_SUCCESS,
  ALL_ROOMS_FAIL,
  CLEAR_ERRORS,
} from '../constants/roomConstants';

//Clear errors
export const clearErrors = () => async (dispatch) => {
  return dispatch({
    type: CLEAR_ERRORS,
  });
};

// Get all rooms
export const getRooms = (req) => async (dispatch) => {
  try {
    const { origin } = absoluteUrl(req);

    const { data } = await axios.get(`${origin}/api/rooms`);

    dispatch({
      type: ALL_ROOMS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: ALL_ROOMS_FAIL,
      payload: error.response.data.message,
    });
  }
};

Answer 1

在 index.js 中，你的 getServerSideProps 函数应该是这样的；

export const getServerSideProps = wrapper.getServerSideProps((store) => async ({ req }) => {
 await store.dispatch(getRooms(req));})

Answer 2

使用旧版本的 next-redux-wrapper 比如 6.0.2