react结合redux的开发步骤

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

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

首先通过Redux中的一个对象函数 createStore来创建一个store
创建上一步中的store的时候在 createStore函数中传递reducer的函数来改变state的状态
创建一个action,这个action是个对象主要包含type和payload。这个type主要是reducer函数更新state状态的一个处理类型，根据类型分类对state内的状态进行相应的更新处理
上面的步骤都操作完了之后，只需要通过store下面的dispatch的派发action，通过派发action后，redux会触发相应的reducer来更新相应的state状态
最后通过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状态；

首先我们需要将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在项目中的应用，如有问题欢迎大佬们指点一二，谢谢

react结合redux的开发步骤相关推荐

一篇文章读懂 React and redux 前端开发 -DvaJS, a lightweight and elm-style framework.
DvaJS: React and redux based, lightweight and elm-style framework. https://dvajs.com/ 实例项目源码:https:/ ...
React仿CNode社区(感受React + Typescript + Redux开发流程)
CNode 社区为国内最专业的 Node.js 开源技术社区,致力于 Node.js 的技术研究 GitHub 在线体验地址说明使用 React编写,感受React + Typescript + ...
Rekit Studio简介：用于React和Redux开发的真实IDE
by Nate Wang 内特·王 Rekit Studio简介:用于React和Redux开发的真实IDE (Introducing Rekit Studio: a real IDE for Rea ...
react项目开发步骤_成为专业React开发人员的31个步骤
react项目开发步骤我为达到可雇用水平而进行的每个项目和课程. (Every single project and course I took to reach a hireable level. ...
shopify二次开发教程_详细教程：如何将Shopify的Storefront API与React和Redux结合使用...
shopify二次开发教程 by Chris Frewin 克里斯·弗里温(Chris Frewin) 详细教程:如何将Shopify的Storefront API与React和Redux结合使用 ( ...
webpack+react+redux+es6开发模式---续
一.前言之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
Cordova+React+OnsenUI+Redux新闻App开发实战教程-姜博-专题视频课程
Cordova+React+OnsenUI+Redux新闻App开发实战教程-779人已学习课程介绍 Cordova+React+OnsenUI+Redux新闻App开发实战视频培训 ...
（头条新闻）Cordova+React+OnsenUI+Redux新闻App开发实战教程
前言伴随着HTML5技术的普及力度与日俱增, 混合应用开发已经备受关注, 百家争鸣的技术框架,如何做好技术选型,搭建最稳健的架构,快速的持续集成,是一个跨平台App开发的关键所在,所以本套视频教程凭 ...

react结合redux的开发步骤

react结合redux的开发步骤相关推荐

最新文章

热门文章