您的位置:首页 > Web前端 > React

【React】 20课 解决reactn内的redux异步执行函数报错方法

2019-07-20 11:19 2381 查看

redux内异步函数执行如图所示:

本项目的目录结构如下:

redux内实现异步方法首先我们需要安装redux-thunk:

cnpm install redux-thunk --save


在创建数据仓库的过程我们通过compose方法与applyMiddleware中间件来解决异步函数问题

const store = createStore(
reducer,
compose(
applyMiddleware(thunk)  //中间件用于处理store仓库内部异步方法
)
);

本项目主要代码如下:

在redux文件夹中我们存放redux的index.js文件 内容如下:

const add_Num = '增加一条数据';
const remove_Num = '删除一条数据';

// import {createStore} from "redux";
/*
state:数据原先的状态
action:需要来进行改造的内容
action.type 决定你要处理的类型
进行判断:if,swich
*/
export function reducer(state=0,action){
switch(action.type){
case '增加一条数据':
return state + 1
case '删除一条数据':
return state - 1
default:
return 0
}
}

export function addNum(){
return{
type: add_Num
}
}

export function removeNum(){
return{
type: remove_Num
}
}

//异步函数
export function removeAsync(){
return dispatch=>{
setTimeout(()=>{
dispatch(removeNum())
}, 2000)
}
}

在src内的index.js文件我们创建一个store数据创库 内容如下:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './redux/index'
import {
reducer,
addNum,
removeNum,
removeAsync
} from './redux/index'; //导入redux文件
//applyMiddleware中间件, compose处理异步函数的方法
import { createStore, applyMiddleware,compose } from 'redux';  //引入redux
import thunk from 'redux-thunk';

//创建库
const store = createStore(
reducer,
compose(
applyMiddleware(thunk)  //中间件用于处理store仓库内部异步方法
)
);
render();
function render(){
ReactDOM.render(
<App
store={store}
add={addNum}
remove={removeNum}
removeAsync={removeAsync}
/>,
document.getElementById('root')
);
}

//监听到dispatch事件执行,后数据改变时就执行listener()
store.subscribe(render)

在App组件中执行数据仓库内的异步函数:

import React, { Component } from 'react'

export default class App extends Component {
render() {
//获取根组件传递过来的 数据仓库与仓库内的方法
const {store, add, remove,removeAsync} = this.props;
return (
<div>
<h1>redux实践</h1>
<h2>数据有{ store.getState() }条</h2>

<input
type="button"
value={'增加'}
onClick={
()=>{store.dispatch( add() ) }
}
/>
<input
type="button"
value={'删除'}
onClick={
()=>{store.dispatch( remove() ) }
}
/>
{/* {异步的函数} */}
<input
type="button"
value={'异步删除数据'}
onClick={
()=>{store.dispatch( removeAsync() ) }
}
/>
</div>
)
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: