状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点。React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http://cn.redux.js.org/index.html 前言虽然官方文档上 ...
状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点。React官方推荐我们使用Redux来管理我们的React应用,同时也提供了Redux的文档来供我们学习,中文版地址为http://cn.redux.js.org/index.html
前言
虽然官方文档上说只需几分钟就能上手 Redux,但是我个人认为即便你看个两三天也可能上手不了,因为文档里面的知识点不仅数量较多,而且还艰涩难懂,不结合一些实例来看很难用于实际项目中去。
但是不要担心自己学不会,这不我就给大家带来了这篇干货,也是我学习Redux的心得体验。
如果你对如何构建React单页应用还不了解的可以先移步我的上一篇文章《React 构建单页应用方法与实例》。
那么下面我就将介绍如何利用Redux来管理你的React项目了,而这里我主要教你构建的是基于React + Redux + React-Router的方法,这也是官方文档里介绍的比较少但是项目中却必备的知识点。
项目目录
首先,一个基于React + Redux + React-Router的项目目录可以按照我下方的图片来构建:
其中assets目录用于存放项目的静态资源,如css/图片等,src目录则用于存放React的组件资源。
入口文件配置
在webpack的配置项中,我们需要一个或多个入口文件,这里我就不展示关于package.json及webpack.config.js的文件配置,最后我会提供整个项目的下载链接供大家参考。这里我主要介绍下入口文件index.js的配置说明。
import React from 'react' // 引入Reactimport { render } from 'react-dom' // 引入render方法import { Provider } from 'react-redux' // 利用Provider可以使我们的 store 能为下面的组件所用import { Router, browserHistory } from 'react-router' // Browser history 是由 React Router 创建浏览器应用推荐的 historyimport { syncHistoryWithStore } from 'react-router-redux' // 利用react-router-redux提供的syncHistoryWithStore我们可以结合store同步导航事件import finalCreateStore from './src/store/configureStore' //引入增强后的storeimport DevTools from './src/containers/DevTools' // 引入Redux调试工具DevToolsimport reducer from './src/reducers' // 引入reducers集合import routes from './src/routes' // 引入路由配置import './assets/css/bootstrap.min.css' // 引入样式文件// 给增强后的store传入reducerconst store = finalCreateStore(reducer)// 创建一个增强版的history来结合store同步导航事件const history = syncHistoryWithStore(browserHistory, store)render( {/* 利用Provider包裹页面 */} <Provider store={store}> <div> {/* 渲染根路由 */} <Router history={history} routes={routes} /> {/* 渲染调试组件 */} <DevTools /> </div> </Provider>, document.getElementById('mount'))
原标题:Redux状态管理方法与实例
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。