无法读取 nextjs 中未定义的属性“调度”答案

【问题标题】：cannot read property 'dispatch' of undefined in nextjs无法读取 nextjs 中未定义的属性“调度”
【发布时间】：2021-09-20 11:05:58
【问题描述】：

我被无法读取的调度功能所困扰。我想将 store.js 文件中的数据提取到 index.js 中以显示它。我目前正在为我的拥有大量数据的 Web 项目试验 Redux。

我对 Redux 不是很熟悉。有没有其他方法可以捕获大量数据？我的代码出了什么问题？

//This is the store.js file

import { createWrapper } from 'next-redux-wrapper';
import { createStore } from 'redux';
import data from './pages/API/data.json';

//initial state
const startState = {
    cards: []
};

//Actions
export const initialCards = () => {
    return {
        type: 'INITIALCARDS',
        cards: data
    }
};

export const addItem = (item) => {
    return {
        type: 'ADD',
        item
    }
};

//create a reducer

export const reducer = (state = initialState, action) => {
    switch(action.type){
        case 'INITIALCARDS':
            return {
                cards: action.cards,
            }
        case 'ADD':
            return {
                ...state,
                cards: [...state.cards, action.item],
            }
        default: return state
    }
}

//create store

const store = (initialState = startState) => {
    return createStore(reducer, initialState);
};

export const initStore = createWrapper(store);

//This is the index.js file

import React from 'react';
import styles from './index.module.css';
import Card from './Card';
import { initStore, initialCards, addItem } from '../store';

class Index extends React.Component {
    static async getInitialProps ({ store }){
        return store.dispatch(initialCards());
    }
    render (){
        return (
            <div className={styles.app}>
                <header className={styles.header}>
                    <img src="/logo.png" className={styles.logo} alt="logo" />
                </header>
                <div className={styles.grid}>
                    {
                        this.props.cards.map((card) => (
                            <Card key={card.id} />
                        ))
                    }
                </div>
                {/*<button onClick={() => dispatch(addItem(item))}></button>*/}
            </div>
        )
    }
};

export default initStore.withRedux(Index);

【问题讨论】：

你检查过Loading local json file into redux store with axios...吗？
@Luka 还没有，我现在去看看。谢谢

标签： reactjs react-redux next.js

【解决方案1】：

我稍微修改了代码，得到了想要的结果。

使用redux中的功能组件和useDispatch方法。

需要进口：

import { useDispatch } from 'react-redux';

组件：

const Index = () => {

const dispatch = useDispatch();
const {cards} = dispatch(initialCards());
return (
    <div className={styles.app}>
        <header className={styles.header}>
            <img src="/logo.png"
                className={styles.logo} alt="logo"
            />
        </header>
        <div className={styles.grid}>
        {
            cards.map((card) => (
                <Card key={card.id} />
            ))
        }
        </div>
        {/* <button onClick={() => dispatch(addItem())}></button> */}
    </div>
)};
export default initStore.withRedux(Index);

【讨论】：

【解决方案2】：

我遇到了同样的错误，所以使用了旧版本的“next-redux-wrapper”

正在使用，

 "next-redux-wrapper": "^7.0.5"

然后，恢复到旧版本

"next-redux-wrapper": "^6.0.2"

并解决了我的问题

【讨论】：