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

原创
2018/03/21 16:49
阅读数 1.4W

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的值,第二个参数就是初始值的设置。

展开阅读全文
打赏
0
2 收藏
分享
加载中
更多评论
打赏
0 评论
2 收藏
0
分享
返回顶部
顶部