邊學邊寫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: {
     
    },
  }
}複製代碼

不可改變大致結構。具體的坑點還沒法得知，畢竟沒有開始正式寫代碼，只是大體的體驗了一把，仍是蠻不錯的。