PS: If you have any doubts, please leave me a message and we can solve it together.

Build a React+Nextjs BASED SSR website from scratch

Add React+ redux to Nextjs project

Build a React+Nextjs BASED SSR website from scratch (3) : Use Markdown in the Next project

How to set up a server and deploy the Nextjs project

The body of the

The basic Nextjs project construction can be found in this article, which is well written and detailed enough that I won’t reprint it:

Use Next. Js to quickly start rendering the React server

After reading this article, you will set up your own local static site that will run at localhost:3000. At this point we can add React and Redux to the project.

Unlike the usual React +redux project, react components are wrapped in a Provider container that allows the container components to get state, as shown below

. 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>
Copy the code

In Nextjs, however, you can’t do that; Next provides the global Container Container. Since you use Next, let’s do it the way it provides. Like this:

. import {Container}from 'next/app';
import {Provider} from 'react-redux'
import {withRouter} from 'next/router'. @withRouterclass MyApp extends App {
	
  constructor(props) { ... }... render () { ... return (<Container>
            <Provider store={reduxStore}>
                <FrontLayout>
                    <Component {. pageProps} / >
                </FrontLayout>
            </Provider>
      </Container>
    );
  }
  
}

export default MyApp
Copy the code

Here @withrouter is a decorator, a function that handles the class. The first argument to the decorator function is the target class to be modified.

The code explanation looks like this:

@withRouter
class A {}
// is equal to this
class A {}
A = withRouter(A) || A;
Copy the code

Then you can use React + Redux in your Next project

The title – redux. Js sample:

const TOGGLE_TITLE = 'TOGGLE_TITLT';

const titleState = {
    currentTitle: 'Soy's personal website '
}

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

Reducer. Js sample:

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

export default combineReducers({TitleReducer})

Copy the code

Store. Js sample:

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)))
}

Copy the code

Blog source: github.com/shaotianyu/…