React脚手架整合Redux和React-Redux的步骤

1.首先初始化项目，创建一个脚手架create-react-app demo01
创建好项目之后将一些无用的东西都删除掉，只留下
这两个文件足以。

2.先进行组件的细分，使组件的结构清晰，可以实现类似todomvc一样的结构用来做demo
然后创建如下的目录

其中action文件用来作为一个方法，在仓库store提交一个action的时候动态返回一个可使用的action，从而加强了action的功能，

这里是一个写好的action，异步操作的话需要使用
import ThunkMiddleware from "redux-thunk"的中间件，将action的对象返回加强为函数
仓库的增强如下

创建对应的reducer

必要的时候在reducer的文件夹中整合一下多个reducer，需要注意的是，reducer的函数与仓库中的状态需要对应

接下来就是创建store并在组件中引入store并且进行dispatch或者subscribe
这里先创建store，需要制定一些初始状态，并且从redux中引入createStore的包
创建一个store，把整合后的管理员传进去，由于要在action中解析函数式的action，
因此需要安装redux-thunk中间件，并导入redux中的applyMiddleware，具体操作如下：
import { createStore,applyMiddleware,compose } from “redux”
import reducer from “…/reducer/index”
import ThunkMiddleware from “redux-thunk”
let state = {
loading:false,
inform:[]
}
let strongCreateStore =
applyMiddleware(ThunkMiddleware)(createStore)
const composeEnhancers = window.REDUX_DEVTOOLS_EXTENSION_COMPOSE || compose;
const store = strongCreateStore(reducer,state,composeEnhancers())

export default store;
这时的仓库已经可以使用，接下来就是最后一步使用react-redux映射，吧react和redux关联起来，这里需要注意三个一：
一个思想：组件需要分为两类，一类展示型组件，一类容器性组件
一个方法：connect方法，在需要银蛇的组件中使用此方法
一个组件：Provider，将store传入到跟组件的上层Provider上，和vue中的跟组件挂载类似。
具体映射组件代码如下：
import React from ‘react’;
import Loading from “…/components/Loading”
import Inform from “…/components/Inform”
import store from “…/store/index”
import Test from “…/components/Test”
import {connect} from “react-redux”
import {setInforms,getInforms} from “…/actions/informAction.js”
import {setLoading} from “…/actions/loadingAction”

class All extends React.Component{
constructor(props){
super(props)
this.state = {
informNum:[],
loading:false
}
}

componentDidMount(){
    // store.dispatch(getInforms())
    this.props.getInforms()
}
render(){
    store.subscribe(()=>{
        this.setState({informNum:store.getState().inform
                        ,loading:store.getState().loading})
        // console.log(this.informNum)
    })
    return (
        

            
导航栏
            {/*  */}
            
            
        
      );
}

}
// 把值映射成props中的属性，再把操作的方法也映射过来
export default connect((state=>({inform:state.inform,loading:state.loading})),{setInforms,getInforms,setLoading})(All)
然后通过react-devtools和this.props都可以查看到映射过来的值