【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> ) } }
相关文章推荐
- JS解决输入1-1000元,输出由1、5、10、20、50、100拼成输入的面值方法总数
- Ngnix反向代理react-router配置问题解决方法
- React前端库,table中的每列内容,进行强制换行的解决方法
- react 前端开发 list表缺少分割线的解决方法
- 在fedora 20中安装VM Tools 出现以下错误,解决方法
- FEDORA 20 无法使用IBUS/fctix 解决方法
- 【fedora 20 waiting for X server to shut down .(EE) server terminated successfully(0)】解决方法
- React中this丢失的四种解决方法
- reactjs常见问题解决方法
- rc=20 > connect to sap gateway failed.解决方法。
- react-native 创建新项目红屏解决方法
- npm install -g react-native-cli 提示npm ERR! Windows_NT 6.1.7601解决方法
- 关于react-native不能热加载的解决方法
- react-native遇到的坑,及解决方法
- ReactNative TransformError: 解决方法
- React—Native开发之 Could not connect to development server(Android)解决方法
- ReactJS & dva 项目常见报错问题与解决方法 (react-router 4)
- ReactNative常见问题及解决方法
- create-react-app慢的解决方法
- create-react-app安装出错问题解决方法