React + Redux + react router技术栈架构
概述本文是《使用React技术栈的一些收获》系列文章的第一篇(第二篇在这里,介绍了React的一些原理)。这篇文章则介绍了大型React项目是如何架构的以及架构的原理和思想。项目背景是一个博客发布平台,类似于简书,项目地址时光笔记(还未完善...) 具体技术栈项目技术栈使用的是React全家桶: 脚手架的选择选择脚手架就选择了整体架构,我选择的是davezuko大神的react-redux-starter-kit,也是最受欢迎的脚手架之一。并在它的基础上安装了一些用到的包,删去了一些不用的包,让它更适合我们的项目。 项目架构项目目录如下: 根据脚手架的架构,我们构建的是一个React单页应用。 总体来说就是采用React router 具体来说首先src目录下有一个 src下的main.js文件:const initialState = window.___INITIAL_STATE__ const store = createStore(initialState)// 创建store const MOUNT_NODE = document.getElementById('root') let render = () => { const routes = require('./routes/index').default(store)// 拿到路由 ReactDOM.render( <AppContainer store={store} routes={routes} />,//注入 MOUNT_NODE ) }
不同页面下的modules下的文件只负责本页面所需的所有 src/store目录下的reducer.js:export const makeRootReducer = (asyncReducers) => { return combineReducers({ auth: auth,form: formReducer,location: locationReducer,...asyncReducers // 各页面下的reducer注入到这里 }) } export const injectReducer = (store,{ key,reducer }) => { store.asyncReducers[key] = reducer store.replaceReducer(makeRootReducer(store.asyncReducers))//注入时更新 } 以及src/store下的createStore文件:const store = createStore( makeRootReducer(),initialState,compose( applyMiddleware(...middleware),...enhancers ) )
routes下的index.js文件:(用来包含各页面)src/routes/index.js:(采用React router import CoreLayout from '../layouts/CoreLayout' import Home from './Home' import FollowRoute from './Follow' import SignRoute from './Sign' import HallRoute from './Hall' import UserPageRoute from './UserPage' import PageNotFound from './PageNotFound' import Redirect from './PageNotFound/redirect' export const createRoutes = (store) => ({ path: '/',component: CoreLayout,indexRoute: Home,childRoutes: [ // 各页面 FollowRoute(store),SignRoute(store),HallRoute(store),UserPageRoute(store),PageNotFound(),Redirect ] }) 每个页面目录下也有一个 每个页面下的index.js文件:(负责输出这个页面)src/routes/sign/index.js(其他页面差不多,举个例子) import { injectReducer } from '../../store/reducers'// 引入注入reducer函数 export default (store) => ({ path: 'sign',//页面路由 getComponent (nextState,cb) { require.ensure([],(require) => { // webpack按需加载 const Sign = require('./containers/SignContainer').default //引入总container const reducer = require('./modules/index').default//引入总reducer injectReducer(store,{ key: 'sign',reducer })// 加载时注入页面reducer到主reducer cb(null,Sign)// 返回页面 }) } }) 在每个页面下,index.js是获得每个页面的入口,每个页面都有自己的
? 总结与反思通过上述架构,项目代码逻辑变得很清晰,每一个文件都有其专属的功能,互不影响,开发过程变得工程化、流程化,思路很清晰,代码出错率大大降低,开发速度大大提高。React router (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |