Next.js项目实战
13
刘军liujun
目录
1Next.js项目介绍
content
2Next.js项目实战
3集成ReduxToolkit
4集成AntDesign5
5购买阿里云服务器
6项目打包和部署
coderwhy项目介绍
?网页云音乐-商城
coderwhy项目需安装的依赖
?样式
?npminormalize.css--save
?npmisass--save
?npmiclassnames--save
?ReduxAndToolkit
?npminext-redux-wrapper--save
?npmi@reduxjs/toolkitreact-redux--save
?Axios(最新的版本发现有bug)
?npmiaxios@1.1.3--save
?AntDesign
?npmiantd–save
?npmi-D@types/antd
coderwhyNext.js集成Redux
?安装依赖库
?npminext-redux-wrapper--save
?可以避免在访问服务器端渲染页面时store的重置
?该库可以将服务器端redux存的数据，同步一份到客户端上
?该库提供了HYDRATE调度操作
?当用户访问动态路由或后端渲染的页面时，会执行Hydration来保持两端数据状态一致
?比如：每次当用户打开使用了getStaticProps或getServerSideProps函数生成的页面时，HYDRATE将执行调度操作。
?npmi@reduxjs/toolkitreact-redux--save
coderwhy创建counter模块的reducer
?我们先创建counter模块的reducer：通过createSlice创建一个slice。
?createSlice主要包含如下几个参数：
?name：用来标记slice的名词
?redux-devtool中会显示对应的名词；
?initialState：第一次初始化时的值；
?reducers：相当于之前的reducer函数
?对象类型，并且可以添加很多的函数；
?函数类似于redux原来reducer中的一个case语句；
?extraReducer：添加更多额外reducer处理otheraction
?createSlice返回值是一个对象
?对象包含所有的actions和reducer；
coderwhystore的创建
?configureStore用于创建store对象，常见参数如下：
?reducer，将slice中的reducer可以组成一个对象传入此处；
?middleware：可以使用参数，传入其他的中间件（自行了解）；
?devTools：是否配置devTools工具，默认为true；
coderwhystore接入应用
?在app.js中将store接入应用：
?Provider，内容提供者，给所有的子或孙子组件提供store对象；