Redux

的呈现不带有任何业务逻辑通过props接收数据(一般数据和函数)不使用任何

Redux

2react-redux相比较于react的不同在于它提供了一些api来方便我们使用redux

1.Provider

Provider是react-redux库提供的顶层组件它可以包裹整个React应用。

通过ProviderRedux的store可以被传递给整个React组件树使得所有的组件都能够访问Redux的状态。

2.connect

connect是react-redux提供的函数它可以连接React组件与Redux的store并在组件中注入Redux的状态和操作。

这样组件就能够通过props直接访问Redux中的状态而不需要手动订阅状态变化或分发actions。

创建Redux

createStore(counterReducer);export

default

store;创建React组件使用react-redux中的connect函数连接React组件与Redux

store

onClick{increment}Increment/buttonbutton

onClick{decrement}Decrement/button/div

);const

mapDispatchToProps)(Counter);在应用的入口文件中使用Provider组件将Redux

store传递给整个应用

document.getElementById(root));3.dva.js

1dvajs全称是DvaJS是一个基于React和Redux的前端应用框架。

它是一个由阿里巴巴出品的框架旨在简化React应用的开发流程尤其是在状态管理方面。

DvaJS借鉴了Redux的思想但在其基础上进行了封装提供了一些方便开发的额外特性。

官网快速上手

DvaJS引入了Model的概念将数据、业务逻辑和界面表现进行了组织。

一个Model包括state、reducers、effects等内容使得相关的代码可以更容易地维护在一起。

Effects

Effects是用于处理异步操作例如数据请求的地方。

在DvaJS中Effects通过Redux-saga来处理异步流程使得异步逻辑更加清晰。

DvaJS封装了Redux的Reducer和Action的创建通过一些简单的约定减少了编写冗长的Reducer和Action的代码。

DvaJS内置了React-Router使得路由的管理变得更加简单。

计数器实例

app.model(require(./models/counter).default);//

注册路由