【水滴石穿】ReactNative-Redux-Thunk

老实说，运行出来的项目让人失望，毕竟我想看各种有趣的demo啊～

先放上源码地址：https://github.com/ludejun/ReactNative-Redux-Thunk

我们来一起看看代码有没有什么有趣的地方，要是没有，只能gg

看到引用了这几个插件，看看代码是怎么使用的

 "react-redux": "^6.0.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",

这个状态处理一个是数据的加减，一个就是登陆退出登陆的状态

//index.js
//定义了引用的根组件是root
/**
 * @format
 * @lint-ignore-every XPLATJSCOPYRIGHT1
 */

import {AppRegistry} from 'react-native';
import Root from './src/Root';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => Root);

我们来看看root.js中是如何处理的

分析代码可知root.js中主要是进行热更新的，在热更新未完成之前是不会让重启的，热更新完毕之后可以重启

//src/Root.js
import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { composeWithDevTools } from 'remote-redux-devtools';
import CodePush from 'react-native-code-push'; // 引入code-push
// 先引用外部组件，然后再引用内部自己定义的组件，这个是引用组件的一种方法
//上面是引用了状态处理的中间件
import reducers from './reducers';
import App from './App';
//中间件store
const loggerMiddleware = createLogger();
const middleware = [thunkMiddleware, loggerMiddleware];
const store = createStore(
  reducers,
  /* preloadedState, */
  composeWithDevTools(
    applyMiddleware(...middleware)
    // other store enhancers if any);
  )
);

if (module.hot) {
  // Enable hot module replacement for reducers
  module.hot.accept(() => {
    const nextRootReducer = require('./reducers/index').default;
    store.replaceReducer(nextRootReducer);
  });
}

// code-push用法： https://github.com/Microsoft/react-native-code-push
const codePushOptions = {
  // 设置检查更新的频率
  // ON_APP_RESUME APP恢复到前台的时候
  // ON_APP_START APP开启的时候
  // MANUAL 手动检查
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
};

class Root extends Component {
//做的热更新的部分
  componentWillMount() {
    CodePush.disallowRestart(); // 页禁止重启
    this.syncImmediate(); // 开始检查更新
  }

  componentDidMount() {
    CodePush.allowRestart(); // 在加载完了，允许重启
    console.log('