react项目搭建
上面说了react,react-router和redux的知识点。但是怎么样将它们整合起来,搭建一个完整的项目。
1、先引用 react.js,redux,react-router 等基本文件,建议用npm安装,直接在文件中引用。
2、从 react.js,redux,react-router 中引入所需要的对象和方法。
import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';
import {Provider, connect} from 'react-redux';
import {createStore, combineReducers, applyMiddleware} from 'redux';
import { Router, Route, Redirect, IndexRoute, browserHistory, hashHistory } from 'react-router';
3、根据需求创建顶层ui组件,每个顶层ui组件对应一个页面。
4、创建actionCreators和reducers,并用combineReducers将所有的reducer合并成一个大的reduer。利用createStore创建store并引入combineReducers和applyMiddleware。
5、利用connect将actionCreator,reuder和顶层的ui组件进行关联并返回一个新的组件。
6、利用connect返回的新的组件配合react-router进行路由的部署,返回一个路由组件Router。
7、将Router放入最顶层组件Provider,引入store作为Provider的属性。
8、调用render渲染Provider组件且放入页面的标签中。
可以看到顶层的ui组件其实被套了四层组件,Provider,Router,Route,Connect,这四个并不会在视图上进行任何改变,它们只是功能性的。
通常我们在顶层的ui组件打印props时可以看到一堆属性:
上图的顶层ui组件属性总共有18个,如果刚刚接触react,可能对这些属性怎么来的感到困惑,其实这些属性来自五个地方:
组件自定义属性1个,actionCreator返回的对象6个,reducer返回的state4个,Connect组件属性0个,以及Router注入的属性7个。