使用redux-promise和redux-actions优化对redux的处理

1.准备工作

我们主要是学习与redux相关的处理，我们搭建的项目会省去路由的处理，我们会借助react的快速构建工具

create-react-app

这个工具在以前的博客中多次介绍，我们直接创建一个初始化项目（在任意位置），执行：

create-react-app stu-react-actions

等待完成...我们看一下提示，简单了解一下指令的使用

npm start 这个是必用的，就是在本地启动我们的项目；

npm run build 必用，构建打包好我们的项目

npm run eject 常用，帮助展开隐藏的文件和目录，因为有时候我们有对依赖模块修改的可能

现在我们切换到我们生成的项目，如果你是win系统：

cd stu-

按下tab键会帮助我们自动补全目录，回车进入项目目录。

启动项目：

npm start

2.利用react和react-redux构建项目

安装这2个依赖

npm install redux --save

npm install react-redux --save

等待完成，我们为什么要加--save的参数？

这样的安装会把依赖注入到package.json文件，如果别人也需要看你的项目，在启动之前只需要npm install就好了。

我就不一步一步的给大家介绍如何配置react和react-redux了，在以前的博客我有过介绍，我粘贴好最终代码。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
 
//redux 和react-redux（关联react和redux）
import { createStore } from 'redux';
import { Provider } from 'react-redux';
 
 
//reducers 状态树state和逻辑操作
import rootRedux from './rootRedux.js'
 
//生成状态树对象
const store = createStore(rootRedux);
console.log(store);
 
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
registerServiceWorker();

App.js

import React, { Component } from 'react';
 
import StuReactRedux from './page/StuReactRedux';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <StuReactRedux></StuReactRedux>
      </div>
    );
  }
}
 
export default App;

rootRedux.js

import { combineReducers } from 'redux';
 
//子reducer
import stuRedux from './store/stuRedux.js'
 
//合并reducer
var rootRedux = combineReducers({
	stuRedux
})
 
export default rootRedux

store/stuRedux.js

//reducer
 
var initstate={
	num:1,
	name:"小李子"
};
 
export default function (state = initstate, action) {
	switch (action.type) {
		case "ADD_NUM":
			return Object.assign({},state,{num:state.num+1});
			break;
		case "SET_NAME":
			return Object.assign({},state,{name:action.name});
			break;
		default:
		  	return state
	}
}

page/Stu.js

import React, { Component } from 'react';
 
class Stu extends Component {
  render() {
    return (
      <div>
      	<div>状态机num值：{this.props.stuRedux.num}</div>
      	<button onClick={this.add.bind(this)}>状态机num值+1</button>
      	<div>状态机name值：{this.props.stuRedux.name}</div>
      	<div>状态机name值修改输入框：<input type="text" ref="sname" /></div>
      	<button onClick={this.setname.bind(this)}>状态机name值修改</button>
      </div>
    );
  }
 
  add(){
  	this.props.ADD_NUM();
  }
 
  setname(){
  	this.props.SET_NAME(this.refs.sname.value);
  }
 
  componentDidMount() {
	  console.log(this)
	  
	  
  }
 
}
 
export default Stu;

page/StuReactRedux.js

import { connect } from 'react-redux';
 
//=====引入组件=====
import Stu from './Stu.js'
 
 
//=====react-redux 封装组件=====
 
// 哪些 Redux 全局的 state 是我们组件想要通过 props 获取的？
function mapStateToProps(state) {
	return {
		stuRedux: state.stuRedux
	};
}
 
// 哪些 action 创建函数是我们想要通过 props 获取的？
function mapDispatchToProps(dispatch) {
	return {
		ADD_NUM:function(){
			dispatch({type:"ADD_NUM"})
		},
		SET_NAME:function(val){
			dispatch({type:"SET_NAME",name:val})
		}
	};
}
 
//封装传递state和dispatch
var StuReactRedux = connect(mapStateToProps,mapDispatchToProps)(Stu);
 
export default StuReactRedux

浏览器预览，我们可以点击测试效果：

3.异步操作

我们先说一个需求，是这样的，我们还是对num做修改，不过这是一个延时操作，我们会在500毫秒之后修改，我们对reducer的代码做修改，加入延时处理：

我们操作会报错，因为reducer内部是不允许异步操作的，

其实不管是同步或者异步，我们的目的是执行：

那么外层的异步处理，其实可以在包裹在dispatch方法外部。这样就避免了reducer内部有异步处理。

我们就按照这种处理逻辑修改，reducer撤回保持不变，在StuReactRedux.js中的

dispatch方法外部书写异步逻辑：

 

4.使用redux-promise让action支持异步

我们就开始学习使用redux-promise

安装redux-promise：

npm install redux-promise --save

首先说说action，他其实是一个约定好的类型对象，包含type字段等，一般action最简单结构：

{type:"SET_NAME",name:"小王"}

按照规范去做的话，结构会是这样：

{
    type: "add_to_do_thunk",
    payload: {
       name:"tom"
    }
}

会把数据放在约定好的规范字段payload中。

我们给dispatch的action可以使用这种方式传入：

对比以前，我们不过是把action让函数去返回，这时候我们在加入异步处理的话：

会提示错误，接收的action不支持异步方式，那么如何解决问题呢，我们的设想就是dispatch接收到产生action的函数后，会在中间加一个处理流程，自动等待异步完成，完成后在去执行一个的dispatch行为。

这时候就用到了中间件，比如我们学习的redux-promise就是这样的中间件，会利用promise帮助我们解决异步问题。

我们只需要在index.js加入这个配置：

现在dispath可以接收一个promise对象，然后等待返回后再去执行dispath。

我们再次修改StuReactRedux.js中生成action的处理：

Promise对象会被dispatch接收到，这时候会转交到中间件中，然后等到Promise对象返回成功或失败拿到传过来的action,dispatch会再次去执行我们action处理。

一个promise的简单写法演示：

var b=new Promise(function(succ,err){
  setTimeout(function(){
    succ("test")
  },500)
})
b.then(function(data){
  console.log(data)//test
})

 

5.使用redux-actions优化action处理

安装redux-actions

npm install redux-actions --save

redux-actions的第一大杀器就是createAction， 他会帮助我们生成规范的action，我们简单演示：

查看返回结果：

createAction函数的第一个就是type值，后面接受一个函数。

另一个就是handleActions，这个函数就是帮助优化代码，我们的reducer里面显示是通过switch case语句去处理的，使用handleActions函数我们可以优化写法。

就是对写法的优化，我们可以对比之前的代码

handleActions的第一个参数是一个对象，对象中的key就是action的type的值，第二个参数就是初始值的设置。