React-异步action

React-异步action

所谓异步简单来说就是一个返回的是一个函数
那同步简单来说就是一个Object的对象

再使用异步action的时候可能会有这个错误, 意思是你需要一个中间器去处理异步action, 所以下载一个插件, 再下面
React异步action
1. 需要下载的插件, 用于异步action

cnpm install redux-thunk -S

// reducer.js

const ASYNCFUN = () => {
	return (dispatch) => {
		setTimeout(() => {
			dispatch({type: '', data: ''})
		},600)
	}
}
// 这个return后面的函数, 就是store调用的, 在用这个异步函数的时候,就是自动传入一个dispatch

2. store.js
再store.js 中引入这些插件;
applyMiddleware

import { createStore, applyMiddleware }
import thunk from 'redux-thunk'
export default createStore(reducer, applyMiddleware(thunk))

格式规定
applyMiddleware 传入 createStore的第二个参数
applyMiddleware 接收 thunk

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React Redux中处理异步数据通常需要使用中间件来处理异步操作。最常用的中间件是Redux Thunk和Redux Saga。 使用Redux Thunk时,你可以在action creator中返回一个函数,而不仅仅是一个普通的action对象。这个函数可以接收dispatch和getState作为参数,并且可以在内部进行异步操作。例如,你可以使用axios库来发起异步请求,并在请求完成后分发相应的action。 下面是一个使用Redux Thunk处理异步数据的示例: ```javascript // 安装并配置Redux Thunk中间件 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk)); // 定义一个异步action creator const fetchPosts = () => { return (dispatch, getState) => { dispatch({ type: 'FETCH_POSTS_REQUEST' }); axios.get('/api/posts') .then(response => { dispatch({ type: 'FETCH_POSTS_SUCCESS', payload: response.data }); }) .catch(error => { dispatch({ type: 'FETCH_POSTS_FAILURE', payload: error.message }); }); }; }; // 在组件中调用异步action creator import { connect } from 'react-redux'; import { fetchPosts } from './actions'; class PostList extends React.Component { componentDidMount() { this.props.fetchPosts(); } render() { // 渲染帖子列表 } } export default connect(null, { fetchPosts })(PostList); ``` Redux Saga是另一个处理异步操作的中间件,它基于Generator函数和ES6的yield关键字来实现。它提供了更强大和可扩展的异步控制流。使用Redux Saga时,你可以定义一系列的saga函数来处理各种异步操作,例如API请求、定时器等。 以下是一个使用Redux Saga处理异步数据的示例: ```javascript // 安装并配置Redux Saga中间件 import { createStore, applyMiddleware } from 'redux'; import createSagaMiddleware from 'redux-saga'; import rootReducer from './reducers'; import rootSaga from './sagas'; const sagaMiddleware = createSagaMiddleware(); const store = createStore(rootReducer, applyMiddleware(sagaMiddleware)); sagaMiddleware.run(rootSaga); // 定义一个saga函数来处理异步操作 import { call, put, takeEvery } from 'redux-saga/effects'; import axios from 'axios'; function* fetchPosts() { try { yield put({ type: 'FETCH_POSTS_REQUEST' }); const response = yield call(axios.get, '/api/posts'); yield put({ type: 'FETCH_POSTS_SUCCESS', payload: response.data }); } catch (error) { yield put({ type: 'FETCH_POSTS_FAILURE', payload: error.message }); } } // 定义根Saga函数 export default function* rootSaga() { yield takeEvery('FETCH_POSTS', fetchPosts); } // 在组件中分发异步action import { connect } from 'react-redux'; import { fetchPosts } from './actions'; class PostList extends React.Component { componentDidMount() { this.props.fetchPosts(); } render() { // 渲染帖子列表 } } export default connect(null, { fetchPosts })(PostList); ``` 无论你选择使用Redux Thunk还是Redux Saga,它们都提供了一种在React Redux中处理异步数据的方式。你可以根据自己的需求选择合适的中间件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值