redux在react-native上使用(三)--加入redux-thunk

ityouknow 发布于2019-06-25 16:01 / 724人阅读

摘要：这篇在上使用二加入是使用可以跟这篇做个对比看下和使用上的区别直接在这项目上修改只是把替换了还是达到一样的项目首先在里添加库并在目录下把文件删除修改下文件处理业务逻辑放在里所以还要修改下大功告成运行

这篇 redux在react-native上使用(二)--加入saga 是使用redux-saga, 可以跟这篇做个对比看下redux-thunk和redux-saga使用上的区别.

直接在这项目上修改, 只是把redux-thunk替换了redux-saga, 还是达到一样的项目.

首先在package.json里添加redux-thunk库, 并在目录下npm install:

"dependencies": {
    ...
    "redux-thunk": "^2.2.0"
},

把sagas.js文件删除, 修改下store.js文件:

import { createStore, applyMiddleware, compose } from "redux";
import createLogger from "redux-logger";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const configureStore = preloadedState => {
    return createStore (
        rootReducer,
        preloadedState,
        compose (
            applyMiddleware(thunk, createLogger())
        )
    );
}

const store = configureStore();
export default store;

redux-thunk处理业务逻辑放在action里, 所以还要修改下actions.js:

import { START, STOP, RESET, RUN_TIMER } from "./actionsTypes";

const startAction = () => ({ type: START });
const stopAction = () => ({ type: STOP });
const resetAction = () => ({ type: RESET });
const runTimeAction = () => ({ type: RUN_TIMER });

var t = -1;

export const start = ()=> {
  return dispatch => {
    dispatch(startAction());
    if(t != -1) return;
    t = setInterval(() => {
      dispatch(runTimeAction());
    }, 1000);
  };
}

export const stop = ()=> {
  return dispatch => {
    dispatch(stopAction());
    if (t != -1) {
      clearInterval(t);
      t = -1;
    }
  }
}

export const reset = ()=> {
  return dispatch => {
    dispatch(resetAction());
    dispatch(stop());
  }
}

OK, 大功告成, commond+R运行.

服务器托管混合云在树莓派上使用webrtc 苹果服务器在云上使用微信小程序如何在电脑上使用怎么在云服务器上使用本机数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/16666.html

redux在react-native上使用(二)--加入redux-saga

摘要：在上一篇在上使用一加入已成功把添加到项目现在再把添加进来这篇在上使用三加入是使用可以跟这篇做个对比看下和使用上的区别这一次做个跑秒器点击开始按钮就开始跑秒点击停止按钮停止跑秒点击重置按钮时间就清零跑秒状态下数字为蓝色停在上一篇 redux在react-native上使用(一)--加入redux 已成功把redux添加到项目, 现在再把redux-saga添加进来. 这篇 redux在...

melody_lql 2019-06-25 16:01 评论0 收藏0
react-native, react-navigation, redux 学习笔记

摘要：的使用用户发出函数算出新的重新渲染三大原则单一数据源，利用的形式向下传播数据流决定只读，通过修改通过纯函数来修改组件状态，是描述动作的纯函数连接和基于全局的，选择我们要注入的不同的组件分开把注入，读取方法三剑客先确定一下初始状 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...

妤锋シ 2019-08-20 17:47 评论0 收藏0
iOS原生混合RN开发最佳实践

摘要：交流群也定期更新最新的学习资料给大家，谢谢大家支持小伙伴们扫下方二维码加入技术交流群 iOS原生混合RN开发详解做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid，有一些Hybrid的开发经验，目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid，在早期的时候，可能部分同学也接触过PhoneGap等hybrid技术，今天我们就简单来...

B0B0 2019-08-23 11:49 评论0 收藏0
iOS原生混合RN开发最佳实践

摘要：交流群也定期更新最新的学习资料给大家，谢谢大家支持小伙伴们扫下方二维码加入技术交流群 iOS原生混合RN开发详解做过原生iOS开发或者Android开发的同学们肯定也都了解Hybrid，有一些Hybrid的开发经验，目前我们企业开发中运用最广泛的Hybrid App技术就是原生与H5 hybrid，在早期的时候，可能部分同学也接触过PhoneGap等hybrid技术，今天我们就简单来...

sugarmo 2019-08-05 14:55 评论0 收藏0
React Native Cannot read property 'bindings&#

摘要：最后想到自己再在终端用新建一个项目，运行成功后查看它的文件，检查依赖模块发现不一样，然后果断把出问题的项目依赖换成然后再通过上面的三步骤进行尝试，还是红屏，差点崩溃 React Native在iOS模拟器上运行加载文件时出现 Failed to load bundle(http://localhost:8081/index.bundle?platform=ios&dev=true&mi...

xiyang 2019-06-25 16:52 评论0 收藏0