边学边写nextjs-3 redux + 数据联动

到了redux状态管理后，感受以前的目录都没发看了，因此重构一下吧。

• 初识next
• antd+scss
  
• redux + 数据联动

重构

以前的目录结构有点乱，对于一个项目来讲不是一个好事。不说多人合做，一我的维护也够呛。

redux安装跟前端同样

cnpm install --save redux react-redux
复制代码

先看一下目录结构

-- root
    | -- src            // 模板等资源放在这里
        | -- components    // 模板
        | -- constants    // 常量
        | -- pages        // 路由
        | -- store        // reducer等存放
            | -- reducers    
            | -- actions    
            | -- index.js    // 入口
        | -- styles        // 公共css
    | -- static         // 静态资源
    | -- .babelrc
    | -- next.config.js
    | -- package.json复制代码

由于改动太大， 我就不一一把文件写出来了，挑几个重点的说下。

src目录

由于大部分前端框架都是从src开始的，并且next打包后会在根目录生成文件夹以及编译后的文件夹等等，若是全放到外面则会显得比较混乱。而且next是支持这样写的，会默认读取外层的pages，若是没有则会读取src里的pages。 还有一点，static是默认放静态资源的目录，若是须要，可使用"/static/1.png"这样写。

_app.js

import React from 'react'
import { Provider } from 'react-redux'

import 'antd/dist/antd.css';
import '@/styles/style.scss';
import store from '@/store'

export default function MyApp({ Component, pageProps }) {
  return <Provider store={store}> {/*这里能够加公共头信息*/} <Component {...pageProps} /> </Provider> }复制代码

若是须要加入公共的头部信息是能够写到以上注释部分的，好比

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">复制代码

适配手机端等，每一个页面都须要的。

import 

相信你们导入文件都习惯了@表明src目录，那样引入文件就能够不须要相对路径，特别是当前这么目录下，一个一个慢慢对比找相对路径就显得很麻烦，因此这里就单独抽出来。

先安装这个包

cnpm install --save-dev customize-cra复制代码

以后修改next.config.js

const path = require('path')
const withSass = require('@zeit/next-sass')
const withCss = require('@zeit/next-css');
const withPlugins = require("next-compose-plugins");
const { override, adjustStyleLoaders, addWebpackAlias } = require("customize-cra");

module.exports = withPlugins([withSass,withCss], {
  webpack: override(addWebpackAlias({
    '@': path.resolve('src'),
  }))
});复制代码

重启，ok完美运行。

这里就不放图了，git地址

github.com/NEOS55555/n…

数据联动

git地址跟上面同样，分支dataAcc

挑几个重点，新建了server文件夹，用于区分服务端的代码。

页面预渲染数据getServerSideProps

当一个页面在用户看到以前就应该有数据出来，则可使用这个函数。emm也不知道这么解释对不对，就拿我那个页面来讲，在用户进来以后，会等待很长一段时间，长时间的看loading。若是能在loading以前就把数据加载好，那就不会以为等待很长。下面看getServerSideProps是如何使用的。

这个实在index.js里的部分代码

export async function getServerSideProps() {
  const res = await axios.get(url+'/test/list')
  const list = res.data.data;
  return {
    props: {
      list,
    },
  }
}复制代码

getServerSideProps这个函数只能放在pages下才会有效，子模块是不会生效的。形式固定

export async function getServerSideProps() {
  
  return {
    props: {
     
    },
  }
}复制代码

不可改变大致结构。具体的坑点还没法得知，毕竟没有开始正式写代码，只是大体的体验了一把，仍是蛮不错的。