Next.js实现react服务器端渲染的方法示例(2)

// /modules/reducers.js import { combineReducers } from 'redux'; import about from './about/reducer'; // 合并到主reducer const reducers = { about }; // combineReducers() 函数用于将分离的 reducer 合并为一个 reducer export default combineReducers(reducers);

// /modules/about/reudcer.js // /about 页面的 reducer import { CHANGE_COUNT } from '../types-constant'; const initialState = { count: 0 }; const typesCommands = { [CHANGE_COUNT](state, action) { return Object.assign({}, state, { count: action.msg }); }, } export default function home(state = initialState, action) { const actionResponse = typesCommands[action.type]; return actionResponse ? actionResponse(state, action) : state; }

// /modules/about/actions.js // /about 页面的 action import { CHANGE_COUNT } from '../types-constant'; export function changeCount(newCount) { return { type: CHANGE_COUNT, msg: newCount }; }

4. 页面中使用

需要用到 next-redux-wrapper 提供的 withRedux 高阶函数，以及 react-redux 提供的 connect 高阶函数

import React, { Component } from 'react'; import withRedux from 'next-redux-wrapper'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import AboutCom from '../components/About/index'; import initializeStore from '../store/initializeStore'; import { changeCount } from '../modules/about/actions'; class About extends Component { constructor(props) { super(props); } render() { const { about: { count }, changeCount } = this.props; return <AboutCom count={count} changeCount={changeCount} />; } } const connectedPage = connect( state => ({ about: state.about }), dispatch => ({ changeCount: bindActionCreators(changeCount, dispatch) }) )(About); export default withRedux(initializeStore)(connectedPage);

 更多

查看 github官网

react-next github上一个next架构为主实现React服务端渲染的模板