将 Redux 添加到 Next.js 应用中
由 Mux 赞助的 DEV 全球展示挑战赛：展示你的项目！
在本文中，我将介绍如何配置 Next JS 应用程序以使用 Redux。
首先设置你的下一个 JavaScript 应用程序
yarn create next-app next-redux
接下来，我们安装所需的软件包。
yarn add redux redux-thunk next-redux-wrapper react-redux
安装完成后，在项目根目录下创建 redux 文件夹，在该文件夹内添加 types.js 和 store.js 文件，并添加 actions 和 reducers 文件夹。
在类型文件中，我们添加一个类型，用于设置用户名。
export const SET_NAME = "SET_NAME"
在 reducers 文件夹中，添加一个main.js文件。在这个文件中，我们将创建一个 reducer 来管理我们应用程序的主要状态。
在这个文件中，我们将初始化一个主状态，其名称只有一个值，默认值为 guest。然后，我们将使用 switch 语句来检测传入的操作和值，并根据接收到的值更新状态。
import * as t from "../types";
const main = (state = {
name: "guest",
}, action) => {
switch(action.type){
case t.SET_NAME:
return {
...state,
name: action.payload
};
default:
return {...state};
}
}
export default main;
在同一个 reducers 文件夹中，我们将添加一个rootReducer.js文件，该文件会将所有 reducer 合并为一个，当您有多个 reducer 文件时，它非常有用。在本文中，我将只使用一个 reducer 文件，即我的主 reducer。
import { combineReducers } from "redux"
import main from "./main"
const rootReducer = combineReducers({
main: main
})
export default rootReducer;
接下来，我们转到我们的store.js文件
在这个文件中，我们将使用redux和创建我们的redux store next-redux-wrapper，我们还将添加redux-thunk以允许我们在将新值分发到状态之前拥有额外的函数。
import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import { createWrapper } from "next-redux-wrapper"
import rootReducer from "./reducers/rootReducer"
const middleware = [thunk]
const makeStore = () => createStore(rootReducer, compose(applyMiddleware(...middleware)))
export const wrapper = createWrapper(makeStore)
现在我们将创建设置名称操作，main.js在 actions 文件夹中创建一个文件，其中将包含一个函数，该函数指定使用新名称值设置名称类型。
import * as t from "../types";
import axios from "axios";
import { request } from "../../util/request";
export const setInfo = (name) => dispatch => {
dispatch({
type: t.SET_NAME,
payload: name
});
}
完成以上步骤后，我们的目录应该如下所示。
现在打开你的_app.js文件，它应该看起来像这样：
import '../styles/globals.css'
function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />
}
export default MyApp
更新后的样子是这样的；
import React from "react"
import { wrapper } from "../redux/store"
const MyApp = ({ Component, pageProps}) => (
<Component {...pageProps} />
)
export default wrapper.withRedux(MyApp);
我们已将应用封装在 store 文件中创建的 Redux wrapper 中，并将 props 传递给了它。
在我们的代码中index.js，移除所有页面内容，只留下一个用于输入姓名的输入框。
return (
<div className={styles.container}>
<p>Enter a Name :</p>
<input
type="text">
</input>
<button>
Submit
</button>
</div>
)
接下来，我们添加一些状态管理功能，用于更新和存储表单的值useState。我们还将首页链接到 Redux 状态，最后使用 `react-actions` 连接动作，mapDispatchToProps使用 `react-state`连接状态mapStateToProps。最终代码index.js应该如下所示。
import { useState } from 'react'
import { connect } from "react-redux"
import { setInfo } from "../redux/actions/main"
import styles from '../styles/Home.module.css'
function Home(props) {
const { name, setInfo } = props
const [newName, setName] = useState("")
return (
<div className={styles.container}>
<p>Enter a Name {name}:</p>
<input
type="text"
value={newName}
onChange={(e) => setName(e.target.value)}>
</input>
<button onClick={() => setInfo(newName)}>
Submit
</button>
</div>
)
}
const mapStateToProps = state => {
return { name: state.main.name }
}
const mapDispatchToProps = {
setInfo
}
export default connect(mapStateToProps, mapDispatchToProps)(Home)
要使用Redux Dev Tools进行调试，请将您的store.js代码更新为：
import { createStore, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk"
import { createWrapper } from "next-redux-wrapper"
import rootReducer from "./reducers/rootReducer"
const middleware = [thunk]
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const enhancer = composeEnhancers(applyMiddleware(...middleware));
const makeStore = () => createStore(rootReducer, enhancer)
export const wrapper = createWrapper(makeStore)
您的主页现在应该如下图所示，更改名称后，“guest”的值也会随之更新。
如果您觉得这篇文章对您有帮助，还可以观看YouTube上的其他 Next.js 视频，或者在 Udemy 上学习 Next.js 全栈课程。
文章来源：https://dev.to/theallegrarr/adding-redux-to-next-js-app-4n5o