reactはredux非同期action-web and nativeを実現し,redux同構造(1)

最近会社でwebappを作ってreactとreduxを使いました
そして、会社はreact-nativeで以前のappを再構築したいと思っています.そして、webappコードと多重化(主にreduxコード)、インタフェースはwebですか、nativeですか.
プロジェクト構造の問題
サブモジュール
現在gitのサブモジュール機能を使用しており、2つのプロジェクトに相当する共通のディレクトリディレクトリ構造は以下の通りである(commonディレクトリはサブモジュール)

# web   

root
--client //web     
----libs //      
------storage.js //web    

--common //   
----imgs //     
----redux // redux   
------actions
------data
------reducers


# react-native   

root
--client //web     
----libs //      
------storage.js //native    

--common //   
----imgs //     
----redux // redux   
------actions
------data
------reducers

babel構成
Web端末

# .babelrc
{
    "presets": ["react", "es2015", "stage-3"]
}

また、babel-polyfillを入口ファイルに導入する

# index.js
import 'babel-polyfill'

native端子

# .babelrc
{
    //       async function
    "presets": ["react-native-stage-0"]
}

redux問題
使用するreduxライブラリ

import promiseMiddleware from 'redux-promise';
import axiosMiddleware from 'redux-axios-middleware';

const enhancers = compose(
    applyMiddleware(
        promiseMiddleware, //  action    
        axiosMiddleware(axios), //axios    
    )
);

action

export function messageList() {
    let local = localStorage.getItem('timestamp') || '0'
    
    return {
        type: 'MESSAGE_LIST',
        payload: {
            request: {
                method: 'get',
                url: '[url]' + '?timestamp=' + local
            },
        }
    }
}

以前web端末を書いていたときにacitonでlocalstorageのデータを取得したことがあり、react-nativeで問題に遭遇しました.react-nativeではローカルデータを同期して取得する方法が見つからないため、以前のコードは多重化できません.redux-promiseというライブラリを導入して非同期actionの問題を解決し、actionの戻り値がpromiseであれば、ローカルストレージをカプセル化して2エンドでコードを1セット使用できるようにすることができます.コードは以下の通りです(webもカプセル化する必要がありますがasyncは使いません)

import storage from '../../../client/libs/storage.js' // 
export async function messageList() {
    let local = await storage.getItem('timestamp')
    
    return {
        type: 'MESSAGE_LIST',
        payload: {
            request: {
                method: 'get',
                url: '[url]' + '?timestamp=' + local
            },
        }
    }
}


# storage.js native
import { AsyncStorage } from 'react-native'

export default {
  getItem : async function (key){
    let value = await AsyncStorageGetItem(key)
    return value
  }
}

async function AsyncStorageGetItem(key) {
  return new Promise((resolve,reject)=>{
    AsyncStorage.getItem(key, function (value) {
      resolve(value)
    })
  })
}
# storage.js native end


# storage.js web
export default {
  getItem : function (key){
    return JSON.parse(localStorage.getItem(key))
  }
}
# storage.js web end 

reducers
現在、reducersで非同期操作を使用する方法は見つかっていないので、巧みにreducersで使用するローカルデータをactionsで転送するしかありません.以下のようにaciton.meta.previousActionはredux-axios-middlewar eライブラリです.具体的には私のこの文章を見ることができます.

export async function messageList() {
    let local = await storage.getItem('timestamp')
    let reducersData = await storage.getItem('[key]')
    
    return {
        type: 'MESSAGE_LIST',
        payload: {
            request: {
                method: 'get',
                url: '[url]' + '?timestamp=' + local
            },
        },
        reducersData: reducersData
    }
}


case 'MESSAGE_LIST':
    return state;
case 'MESSAGE_LIST_SUCCESS':
    //     action     
    let previousActionData = aciton.meta.previousAction.reducersData
    
    return state;
case 'MESSAGE_LIST_FAIL':
    return state;

ダタ
Dataでは一般的にデフォルト値を定義しますが、ローカルからデータを再割り当てするには現在良い方法が見つからない場合は、解決しましょう.

{
    //web       native       
    timestamp: localStorage.getItem('approvalListData.timestamp') || { }
}

今のところこれらの問題にぶつかって、後で問題があってから更新します~