react-redux是react插件
将所有组件分成两大类：UI组件和容器组件
安装npm install react-redux -S
UI组件：

只负责UI的呈现，不带有任何业务逻辑

不使用this.state

所有数据都由this.props提供

不使用任何Redux的API，不需要使用store

容器组件：

负责管理数据和业务逻辑，不负责UI的呈现

带有内部状态

使用Redux的API

组件结构

用容器组件包裹UI组件
容器组件负责与外部的通信，将数据传给UI组件
UI组件渲染出视图
connect函数(来自react-redux插件)：连接React组件与React store

关键字

connect
Provider

App修改为UI组件

index.js

import ReactDOM from 'react-dom'
import App from './App'
import { createStore } from 'redux'
import { counter } from './redux/reducers'
import { Provider } from 'react-redux'const store = createStore(counter)
ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root')
)

App.jsx

import React, { Component, createRef } from 'react'
import { connect } from 'react-redux'
import * as actions from './redux/action'
class App extends Component {constructor(props) {super(props)this.selectRef = createRef()}compute = (method) => {const selectDom = this.selectRef.current,selectVal = Number(selectDom.value);// 使用传入的props.actions this.props[method](selectVal)}render() {// 将App改造为UI组件const { count } = this.propsconsole.log('【app】', this)return (<><h1>数值：{count}</h1><select ref={this.selectRef}><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>&nbsp;<button onClick={() => this.compute('add')}>+</button>&nbsp;<button onClick={() => this.compute('minus')}>-</button>&nbsp;<button onClick={() => this.compute('add_odd')}>奇数加</button>&nbsp;<button onClick={() => this.compute('add_delay')}>延迟加</button></>)}
}
// 用connect函数处理App再暴露出去
export default connect(state => ({count: state // 这里的state是从redux容器中获取到的数据}),{ ...actions }// 要解构出来！否则props里拿不到// 这样即可在App这个UI组件里通过this.props.actions来使用
)(App)

connect方法接收2个参数

函数mapStateToProps，建立state对象到props对象的映射关系
（redux store里的state可以通过UI组件的props获取）

mapDispatchToProps，建立一个store.dispatch方法到props对象的方法
（redux里面action creators创建的函数可以通过props获取）

使用中间件

reducer：纯函数，只承担计算state的功能
view：与state意义对应
action：存放数据的对象，只能被别人操作？
同步：action发出后，reducer立即计算出state
异步：action发出后，过段时间再执行reducer
中间件：一个函数，对store.dispatch方法进行改造，在发出action和执行reducer两步之间添加了其他功能

index.js（引入中间件）

import ReactDOM from 'react-dom'
import App from './App'
// 引入中间件
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import { counter } from './redux/reducers'
import { Provider } from 'react-redux'const store = createStore(counter, applyMiddleware(thunk))
ReactDOM.render(<Provider store={store}><App /></Provider>,document.getElementById('root')
)

reducer.js（只有同步方法）

export function counter(state = 0, action) {const { type, data } = actionswitch (type) {case 'add':return state + datacase 'minus':return state - datacase 'add_odd':if (data % 2 !== 0) {return state + data}// 这里面没有异步方法default:return state}
}

action.js (增加异步方法)

export function add(param) {return {type: 'add', // 方法名data: param // 对应参数}
}
export function minus(param) {return {type: 'minus',data: param}
}
export function add_odd(param) {return {type: 'add_odd',data: param}
}
// 改造成异步action
export function add_delay(param) {return dispatch => {setTimeout(() => {dispatch(add(param))}, 1000)}
}

2 中间件的使用、异步action的创建相关推荐

[译] Don’t call me, I’ll call you：使用 Redux-Saga 管理 React 应用中的异步 action （上）...
原文地址:Don't call me, I'll call you: Side effects management with Redux-Saga (Part 1) 原文作者:David Dvora ...
ASP.NET MVC下的异步Action的定义和执行原理
Visual Studio提供的Controller创建向导默认为我们创建一个继承自抽象类Controller的Controller类型,这样的Controller只能定义同步Action方法.如果我 ...
reactjs redux异步action
编码步骤异步逻辑挪到action中引入并应用中间件,让redux支持异步action yarn add redux-thunk 改造action
[Redux/Mobx] Redux中异步action和同步action最大的区别是什么？
[Redux/Mobx] Redux中异步action和同步action最大的区别是什么? 同步action:执行了dispatch函数之后,对应的reducer纯函数立即得到执行,reducer执行 ...
使用ASP.NET MVC Futures 中的异步Action
在ASP.NET MVC中使用异步是比较麻烦的,从RC1版开始ASP.NET MVC Futures中提供了几个支持异步的类. 相关的类有:AsyncActionDescriptor.AsyncCon ...
为ASP.NET MVC扩展异步Action功能（下）
本文分为上下两部分,您也可以从<Extend ASP.NET MVC for Asynchronous Action>获得全部内容. 执行Action方法对于执行同步Action的Syn ...
F#与ASP.NET（1）：基于事件的异步模式与异步Action
提高ASP.NET应用程序伸缩性的有效手段之一便是使用异步请求.而在ASP.NET MVC 1中是不能直接支持异步Action的,因此我们需要使用一些简单的Hack方式来实现这一点.不过简单的Hack ...
Portal-Basic Java Web 应用开发框架：应用篇（十四） —— 异步 Action
Portal-Basic Java Web应用开发框架(简称 Portal-Basic)是一套功能完备的高性能Full-Stack Web应用开发框架,内置稳定高效的MVC基础架构和DAO框架(已内置 ...
使用ASP.NET MVC Futures 中的异步Action 【转】
之前看过老赵这两篇文章.也研究了一下老赵异步的实现方式. 不过感觉自己扩展的话,在ASP.NET MVC中使用异步还真是麻烦,刚好看到从RC1版开始 ASP.NET MVC Futures中提供了几个 ...

2 中间件的使用、异步action的创建

组件结构

关键字

App修改为UI组件

使用中间件

2 中间件的使用、异步action的创建相关推荐

最新文章

热门文章