注1：本文主要根据 "自述|redux中文文档" 学习的个人总结记录。也是是为了更快更好的学习和接受redux的操作，更好的应用的项目中。原文档地址：
注2：本文较长，可能会需要花一点时间去阅读和理解.之前我们大致的介绍了redux的基本概念，但是没有介绍如何结合到我们的应用中，这里简单介绍搭配React进行开发。
Redux和React之间并没有直接的关系，Redux支持React、Angular、Ember、jQuery 甚至纯 JavaScript。
尽管如此，Redux 还是和 React这类框架搭配起来用最好，因为这类框架允许你以 state 函数的形式来描述界面，Redux 通过 action 的形式来发起 state 变化。
这里用个人搭建的简单的React开发框架进行介绍一番~有什么建议希望大家多多提出~
一般在React中分为两种组件，分别叫做智能组件和笨拙组件，智能组件一般是最顶层的，通过路由进行控制，redux也是通过智能组件进行注入。笨拙组件一般都是智能组件的子组件，关于store中的数据都是通过智能组件中props进行注入。如下图查看区别：
接下来看下整个项目的文件目录结构：
- 如何将我们的应用连接到Redux ？
npm install react-redux
我们应该在组件的最顶层连接redux，另底层组件可以dispatch action以及从redux store中读取state.
首先我们要获取从之前安装好的React-redux中提供的Provider, 在渲染之前把根组件包装进去。
接下来，我们需要通过redux-react提供的connect方法将包装好的组件连接到redux。注意，一般我们只会在顶层组件（也就是智能组件）中使用connect方法，因为这样会很方便的知道你的数据流是从来哪里开始进来的，如果你在每个组件里都使用了connect方法，这样数据的入口就不止一个，对于庞大的应用到最后会容易混淆。
对于使用connect方法包装后的组件，都会得到一个dispatch方法作为组件的props，以及全局state中的内容。
connect方法的参数是一个selector函数，这个selector函数可以接受到全局的state，然后返回组件需要的state。这样说大家可能云里雾里，看下图以及图中注释相信大家一定会明白的。上面那个截图中，我们通过provider注入了store，接下来：
基本上在React应用中使用redux就是如此简单，但是我相信还是有很多人有很多的迷惑，那么我根据自己在学习中的遇到的疑惑总结如下几点：
1. store从哪里来的？
答：之前说过，我们会根据应用将reducer拆分成多个子reducer，然后通过redux提供的combineReducers将所有的reducer合并成一个根reducer。最后通过createStore方法创建一个redux store。
//rooterReducer.js 文件import {combineReducers} from 'redux';import * as demoReducer from './demoReducer.js'const rootReducer = combineReducers({ ...demoReducer}); export default rootReducer;//然后如下创建redux storeimport rootReducer from 'rooterReducer.js'const store = createStore(rootReducer) 2. store怎么注入到组件中？
答：上面说了store是通过Provider注入到组件中的。
import rootReducer from 'rooterReducer.js'const store = createStore(rootReducer)ReactDOM.render(, document.getElementById('app') )
3. 通过connect连接的组件中如何获取到全局state？
答：connect方法中可以传入一个selector函数，这个函数可以获取到全局的state。
//假设是通过上面两个问题中的方法创建redux store和传入storefunction select(state) { console.log(state, 'state') //{ demoReducer: {} } "state" return state}export default connect(select)(HomePage)