Next.js踩坑入门系列（五）— 引入状态管理redux

Next.js踩坑入门系列

• (一) Hello Next.js
• (二) 添加Antd && CSS
• (三) 目录重构&&再谈路由
• (四) Next.js中期填坑
• (五) 引入状态管理Redux
• (六) 再次重构目录
• (七) 其他相关知识

写在前面

原本打算至少一周一篇的，可是最近事儿赶事儿全赶到一起了，项目多了起来还顺便搬了一次家，让我想起了一个段子，一个程序员为了不长房租答应房东教他孩子学习编程^_^北漂不易，且行且珍惜~希望每一个北漂程序员都能早日财富自由，如果实在太累了就换个城市吧~

填坑

上一讲有关路由的坑还是没填明白，原本params路由自认为已经没问题了，不过最近在测试的时候，发现进入系统的时候是没问题的，但是如果在params路由页面进行刷新，会404页面。所以，继续fix～

// server.js
server.get('/user/userDetail', (req, res) => {
      return app.render(req, res, `/user/userDetail/${req.query.username}`);
    });

    server.get('*', (req, res) => {
      const parsedUrl = parse(req.url, true);
      const { pathname } = parsedUrl;
      if (typeof pathname !== 'undefined' && pathname.indexOf('/user/userDetail/') > -1) {
        const query = { username: pathname.split('/')[3] };
        return app.render(req, res, '/user/userDetail', query);
      }
      return handle(req, res);
});
复制代码

上面这样就真的可以了，刷新页面也没有任何问题～

APP

写过react SPA的大家应该基本都用过redux，按照官方教程一顿复制粘贴基本都能用，需要注意的就是redux会创建一个全局唯一的store包在整个应用的最外层。喏，这个是redux官方的示例：

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import todoApp from './reducers'
import App from './components/App'

let store = createStore(todoApp)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
复制代码