上次初学用 react
写了个后台管理,这次便寻思写个移动端的项目。便有了这次的这个项目。
这个项目以前写了个 vue
的版本。有兴趣的可以 点击进入
react
+ react-redux
+ react-router
+ webpack
actions
: 存放 action 方法assets
: 静态资源文件,存放图片啥的components
: 常用组件reducers
: 存放 reducerrouter
: 路由管理store
: 状态管理 reduxstyles
: 样式文件utils
: 常用封装views
: 视图页面通过 import()
方法加载组件, 在通过高阶组件处理 import
返回的 Promise
结果。
// asyncComponent.js
import React from 'react'
export default loadComponent => (
class AsyncComponent extends React.Component {
state = {
Component: null,
}
async componentDidMount() {
if (this.state.Component !== null) return
try {
const {default: Component} = await loadComponent()
this.setState({ Component })
}catch (err) {
console.error(`Cannot load component in <AsyncComponent />`);
throw err
}
}
render() {
const { Component } = this.state
return (Component) ? <Component {...this.props} /> : null
}
}
)复制代码
如下使用
import asyncComponent from './asyncComponent'
const Demo = asyncComponent(() => import(`views/demo.js`))
<Route path="/demo" component={Demo}/>复制代码
统一配置路由,及路由状态
import asyncComponent from './asyncComponent'
const _import_views = file => asyncComponent(() => import(`views/${file}`))
export const loyoutRouterMap = [
{
path: '/',
name: '首页',
exact: true,
component: _import_views('Home')
},
{
path: '/video',
name: '视频',
component: _import_views('Video')
},
{
path: '/headline',
name: '微头条',
component: _import_views('Headline')
},
{
path: '/system',
name: '系统设置',
auth: true,
component: _import_views('System')
}
]复制代码
通过路由配置中 auth
属性来判断是否需要登录
如以下配置
{
path: '/system',
name: '系统设置',
auth: true,
component: _import_views('System')
}复制代码
登陆配置及判断
// authRoute.js
import React from 'react'
import store from '../store'
import { Route, Redirect } from 'react-router-dom'
export default class extends React.Component {
render () {
let {component: Component, ...rest} = this.props
// 是否登录
if (!store.getState().user.user.name) {
return <Redirect to='/login' />
}
return <Route {...rest} component={Component}/>
}
}
// 生成route
const renderRouteComponent = routes => routes.map( (route, index) => {
if (route.auth) { // 需要权限登录
return <AuthRoute key={index} {...route}/>
}
return <Route key={index} {...route}/>
})复制代码
通过 react-router-transition
做的切换动画。
然后通过 history.slideStatus 来判断如何动画
用 redux-actions
来书写 action 跟 reducer
// action.js
import { createAction } from 'redux-actions'
import axios from 'utils/axios'
export const getHeadlineList = (params) => dispatch => {
return new Promise( (resolve, reject) => {
axios.get('headline/list', params)
.then( res => {
const list = res.data.list
dispatch(createAction('GET_HEADLINE_LIST')(list))
resolve(list)
}).catch( err => {
reject(err)
})
})
}
// reducer.js
import { handleActions } from 'redux-actions'
import { combineReducers } from 'redux'
const state = {
headlineList: []
}
const headline = handleActions({
GET_HEADLINE_LIST: (state, action) => {
let list = action.payload
state.headlineList = state.headlineList.concat(list)
return {...state}
}
}, state)
export default combineReducers({
headline
})
// store.js
// redux-thunk配置
import { createStore, compose, applyMiddleware } from 'redux'
import reducer from '../reducers'
import thunk from 'redux-thunk'
const configureStore => createStore(
reducer,
compose(
applyMiddleware(thunk)
)
)
export default configureStore()复制代码
还有一些零零散散的知识点,就不介绍了,具体可以到 github 上查看。