redux异步中间件比较

redux很精简,只处理同步数据流, 异步交给中间件处理
view -> action -> reducer -> store

  1. 生猛的就不用中间件
    使用:在view层中发起api请求,在请求的回调中dispatch(action)
    缺点:view和modal耦合

  2. redux-thunk (模板代码有点多但是场景基本cover得住)
    使用:redux中action默认返回的是个对象{type: ‘GET_ALL_DATA’, payload: {name: ‘lala’}}
    redux-thunk允许你action可以返回是个函数,在函数中进行api请求,并在请求成功/失败回调中发送对应成功/失败type的action
    缺点:模板代码多,三种类型的type(start、success、fail)

  3. redux-promise (比redux-thunk模板代码精简些,缺状态)
    使用:action返回的变回个对象,payload直接把api的promise返回,中间件替你写了promise.then成功失败的处理过程,
    你不用写三种类型的type了,中间件在payload添加了status状态,供你去区别action
    缺点:中间件把start状态给吃了,就暴露了success、fail,要是你想要start状态就尴尬了

  4. redux-saga (有学习成本,越复杂越适合用)
    使用:跳出三界之外,单拉线程,监听普通的action,调用处理函数,再发出新的action。
    适于解决复杂的异步场景,比如用户一个动作要改变两个state,redux-thunk、redux-promise要么在action冗余要么在reducer冗余
    缺点:generator函数、redux-saga api、响应式编程思维的学习成本

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React和Redux是两个独立的库,但它们可以很好地结合使用以管理异步数据。Redux是一个状态管理库,它可以帮助你存储和管理你的应用程序的状态。而React是一个用于构建用户界面的库。 在React中使用Redux来处理异步数据的一种常见模式是使用Redux Thunk中间件。Thunk是一个允许你在Redux中处理异步逻辑的函数,它可以帮助你在Redux中分发异步操作。 首先,你需要安装ReduxRedux Thunk库: ``` npm install redux npm install redux-thunk ``` 然后,你需要创建Redux store,引入ReduxRedux Thunk,并将Redux Thunk作为Redux中间件使用: ```javascript import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers'; const store = createStore(rootReducer, applyMiddleware(thunk)); ``` 在你的Redux应用程序中,你可以创建一个action来处理异步操作。例如,你可以创建一个用于获取数据的异步操作: ```javascript export const fetchData = () => { return (dispatch) => { dispatch(fetchDataRequest()); // 异步操作,例如通过API获取数据 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => { dispatch(fetchDataSuccess(data)); }) .catch(error => { dispatch(fetchDataFailure(error)); }); }; }; const fetchDataRequest = () => { return { type: 'FETCH_DATA_REQUEST' }; }; const fetchDataSuccess = (data) => { return { type: 'FETCH_DATA_SUCCESS', payload: data }; }; const fetchDataFailure = (error) => { return { type: 'FETCH_DATA_FAILURE', payload: error }; }; ``` 在上面的示例中,`fetchData`是一个异步操作,它使用了Redux Thunk来处理异步逻辑。它首先分发一个`fetchDataRequest` action,然后执行异步操作(例如通过API获取数据),最后分发一个`fetchDataSuccess`或`fetchDataFailure` action,具体取决于异步操作的结果。 你可以在React组件中使用`connect`函数将这些action和Redux store连接起来,并将它们映射到组件的props上。这样,你就可以在组件中调用这些action来处理异步数据了。 希望这个例子能帮助你理解如何在React和Redux中处理异步数据。如果你还有其他问题,请随时提问!

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值