TA貢獻1799條經(jīng)驗 獲得超9個贊
假設您了解 Redux 和 React 的知識。
首先，安裝這些包
$ npm install next-redux-wrapper react-redux redux redux-thunk --save
$ npm install redux-devtools-extension --save-dev
覆蓋或創(chuàng)建默認App，創(chuàng)建文件./pages/_app.js如下所示：
import withRedux from 'next-redux-wrapper'
import { Provider } from 'react-redux'
import { withRouter } from 'next/router'
import App from 'next/app'
import createStore from 'store/createStore'
class MyApp extends App {
render () {
const { Component, pageProps, router, store } = this.props
return (
<Provider store={store}>
<Component router={router} {...pageProps} />
</Provider>
)
}
}
export default withRedux(createStore)(
withRouter(MyApp)
)
在您的頁面/組件中，您可以像平常一樣使用 Redux。
TA貢獻1836條經(jīng)驗 獲得超13個贊
我建議使用redux 工具包，因為它減少了 redux 中的樣板代碼......
使用createSlice，您可以同時創(chuàng)建Action 和Reducer。如果將 API 調(diào)用分派到后端并對待處理、已完成和拒絕的 API 調(diào)用執(zhí)行適當?shù)臓顟B(tài)突變，createAsyncThunk是最好的！
根據(jù)我的個人經(jīng)驗，如果您只是為了初步學習而問這個問題，那么您作為答案附加的第一個設置就足夠了，但對于真正的應用程序來說，所以絕對應該使用 Redux Toolkit。您可以檢查這個沙箱示例
TA貢獻1752條經(jīng)驗 獲得超4個贊
舉報