你的位置:首页 > 软件开发 > Java > Redux状态管理方法与实例

Redux状态管理方法与实例

发布时间:2016-07-11 16:00:08
状态管理是目前构建单页应用中不可或缺的一环,也是值得花时间学习的知识点。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的项目目录可以按照我下方的图片来构建:

Redux状态管理方法与实例

其中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 (#换成@)。

可能感兴趣文章

我的浏览记录