從零搭建一個基於React+Nextjs的SSR網站(二)：在Nextjs項目中增長react+redux

PS: 若是你有疑惑，能夠給我留言，我們一塊兒解決它。

從零搭建一個基於React+Nextjs的SSR網站(一)：寫在前面

從零搭建一個基於React+Nextjs的SSR網站(二)：在Nextjs項目中增長react+redux

從零搭建一個基於React+Nextjs的SSR網站(三)：在Next項目中使用markdown

從零搭建一個基於React+Nextjs的SSR網站(四)：如何搭建服務器並部署Nextjs項目

正文

基本的Nextjs項目構造能夠參考這篇文章，寫得很好也很是詳細，我就不轉載了：

用Next.js快速上手React服務器渲染

看完上面的這篇文章後你會搭建一個本身的本地的靜態站點，而且能夠運行在localhost:3000。這個時候咱們就能夠向這個項目上面添加React和Redux了。

與往常的react+redux項目不一樣的是，以往的react的組件是用Provider容器包裹起來的，能夠讓容器組件拿到state，好比下面這樣

...
import { Provider } from 'react-redux'
import { 
	BrowserRouter, 
	Route, 
	Switch
} from 'react-router-dom'
...

<Provider store={store}>
	<BrowserRouter> <div className="XXX"> <Component1 /> <Switch> <Route path='/path1' exact component={Component1} /> <Route path='/path2' exact component={Component2} /> </Switch> </div> </BrowserRouter> </Provider> 複製代碼

不過在Nextjs中，不能這麼寫，Next提供了全局的容器Container。既然用了Next，那就用它提供的方式去解決吧。好比下面這樣：

...
import {Container} from 'next/app';
import {Provider} from 'react-redux'
import {withRouter} from 'next/router'
...
@withRouter

class MyApp extends App {
	
  constructor(props) {
    ...
  }
  ...
  render () {
    ...
    return (
      <Container> <Provider store={reduxStore}> <FrontLayout> <Component {...pageProps} /> </FrontLayout> </Provider> </Container> ); } } export default MyApp 複製代碼

這裏的@withRouter是裝飾器寫法，是一個對類進行處理的函數。修飾器函數的第一個參數，就是所要修飾的目標類。

用代碼解釋大體是下面這樣：

@withRouter
class A {}
// 等於下面這麼寫
class A {}
A = withRouter(A) || A;
複製代碼

而後你就能夠在你的Next項目中使用react+redux了

title-redux.js示例：

const TOGGLE_TITLE = 'TOGGLE_TITLT';

const titleState = {
    currentTitle: 'Soy的我的網站'
}

export function TitleReducer(state=titleState, action) {
    switch (action.type){
        case TOGGLE_TITLE:
            return {...state, currentTitle: action.title}
        default:
            return state;
    }
}

export function toggleDispatch(title = titleState.currentTitle){ 
    return {type: TOGGLE_TITLE, title}
}
複製代碼

reducer.js示例：

import { combineReducers } from 'redux'
import { TitleReducer } from './redux/title-redux';

export default combineReducers({TitleReducer})

複製代碼

store.js示例：

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import reducers from './reducer'
import {composeWithDevTools} from 'redux-devtools-extension'

export function initializeStore(initialState = {}) {
	return createStore(reducers, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware)))
}

複製代碼

博客源碼：github.com/shaotianyu/…