無法讀取 nextjs 中未定義的屬性“調度”

Question

我被無法讀取的調度 function 困住了。 我想從 store.js 文件中提取數據到 index.js 中來顯示它。 我目前正在為擁有大量數據的 web 項目試驗 Redux。

我對 Redux 不是很熟悉。有沒有其他方法可以捕獲大量數據？ 我的代碼 go 有什么問題？

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

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

Answer 2

此問題是由於next-redux-wrapper從版本6 升級到版本 7 引起的。 因此，所有 initialProp 方法都應該包裝在它們適當的存儲包裝器中。

class Page extends Component{

     public static getInitialProps = wrapper.getInitialPageProps(store => () => { ... });
     render() {
       // stuff
     }
}
export default Page;

因此，將index.js文件中getInitialProps的 function 修改為，

static getInitialProps = initStore.getInitialAppProps((store) => async () => {
return store.dispatch(initialCards());
});

為我工作。

Answer 3

我遇到了同樣的錯誤，所以使用了舊版本的“next-redux-wrapper”

正在使用，

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

然后，恢復到舊版本

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

並解決了我的問題