react结合redux的开发步骤

 一.第一步是介绍redux的工作流程逻辑解析图：

二.第2步介绍下redux的应用如下图所示：

1. 首先通过Redux中的一个对象函数 createStore来创建一个store
2. 创建上一步中的store的时候在 createStore函数中传递reducer的函数来改变state的状态
3. 创建一个action,这个action是个对象主要包含type和payload。这个type主要是reducer函数更新state状态的一个处理类型，根据类型分类对state内的状态进行相应的更新处理
4. 上面的步骤都操作完了之后，只需要通过store下面的dispatch的派发action，通过派发action后，redux会触发相应的reducer来更新相应的state状态
5. 最后通过store.subscribe(()=>{})来订阅，意思差不多就是监听state的状态的更新，主要是通过store.getState()的方法来获取state更新后的状态

三. 第三步是让redux和react-redux在项目中简单应用的例子

 第一步创建一个rootReducer.js文件如上图所示

第二步如下图，将这个rootReducer.js引入如果文件index.js，并且将它作为入参传入createStore中创建一个store；（createStore是来自于redux，在上面介绍redux中都有介绍）

然后创建一个store是通过如下方式：

import { createStore } from 'redux'; 

const store = createStore(rootReducer.js)

接下来我们需要从react-redux中引入provider；

import { Provider } from 'react-redux';

然后我们需要将Provider形式将store注入到组件中来实现组件和store的通信，如下代码

<Provider store={store}><App /></Provider>

最后综合注入的代码截图如下：

四.第四步是如何在组件中如何连接store中的state状态和修改state状态；

1. 首先我们需要将react-redux 中的 connect 引入至组件中,connect的作用是将store结合组件返回个新的高阶组件

import { connect } from 'react-redux';

const mapStateToProps = (state) =>{
    return {
             posts: state.posts

           }
} 

export default connect(mapStateToProps)(组件的名称)

这样组件中就可以直接将state中的状态posts注入到props中，如此组件中就可以通过

this.props.posts直接用state中posts数据了，综合如下图所示：

 五.第五步就是如何子组件中更新state中的数据状态，如下图中的mapDispatchToProps

const  mapDispatchToProps = (dispatch) => {
   return {
        deletePost: dispatch({type: 'DELETE_POSTS',id: id})
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(组件名称)

如上图所示通过mapDispatchToProps（接受一个参数就是dispatch---用来派发action），组件中可以通过事件触发，在事件中调用上图代码中的deletePost函数来更新state中posts数据状态，下图就是如何调用deletePost这个方法来达到更新state中posts数据的状态

比如组件中有个button按钮，通过button按钮的点击事件来调用deletePost，如下图所示：

<button onclick={this.handleClick.bind(this)}></button>

handleClick() {
 this.deletepost(this.props.product_id)
}

上述中说明了通过按钮的点击事件来触发 mapDispatchToProps的deletePost事件来派发action，从而更新state中posts的数据。

这个只是我总结的部分学习react-redux和redux在项目中的应用，如有问题欢迎大佬们指点一二，谢谢