React/Reduxでコールバックを実装する方法

Question

私は別のファイルに入れたい機能があります。問題は、関数が時間を要する要求を出すことである。私は別のファイルにその関数を持っていて、それを呼び出すことができるようにしたい。

私はこの機能のみを投稿しますが、もっと情報が必要な場合はファイルの残りの部分を投稿しますが、サイズが大きく、混乱がたくさんあり、すべてのコードで読みにくい場合があります。

私は今、同じページの機能を使ってできることすべてを行うことができますが、このようなことができたいと思います。

submitRadius(items, userRadius, (err, response) => { 
    if(err){console.log(err)} 
    console.log(response) 

}); 

機能：

submitRadius(userRadius) { 
    const { items } = this.props; 
    const markers = []; 
    items.map((item, i) => { 
     const newGeoArr = item.geolocation.split(','); 
     if (
     newGeoArr.length > 1 && 
     newGeoArr !== '' && 
     newGeoArr[0] !== undefined && 
     newGeoArr[0] !== null 
    ) { 
     item.position = { lat: Number(newGeoArr[0]), lng: Number(newGeoArr[1]) }; 
     item.distance = { latitude: Number(newGeoArr[0]), longitude: Number(newGeoArr[1]) }; 
     geolocation.getCurrentPosition((position) => { 
      const currentLocation = { 
      latitude: position.coords.latitude, 
      longitude: position.coords.longitude, 
      }; 
      const distanceArr = geolib.orderByDistance(currentLocation, [item.distance]); 
      const miles = (distanceArr[0].distance/1609.34).toFixed(2); 
      if (miles <= userRadius) { 
      markers.push({ 
       position: item.position, 
       number: i, 
       content: item.description, 
       showInfo: false, 
      }); 
      this.setState({ 
       markers, 
      }); 
      } 
     }); 
     } 
    }); 
    this.setState({ 
     markers, 
    }); 
    } 

Answer 1

別のsubmitRadius.jsファイルに同じ関数を記述し、setStateを次のように置き換えることができます。今

function submitRadius(items, userRadius, callback) { 
    const markers = []; 
    items.map((item, i) => { 
    const newGeoArr = item.geolocation.split(","); 
    if (
     newGeoArr.length > 1 && 
     newGeoArr !== "" && 
     newGeoArr[0] !== undefined && 
     newGeoArr[0] !== null 
    ) { 
     item.position = { lat: Number(newGeoArr[0]), lng: Number(newGeoArr[1]) }; 
     item.distance = { 
     latitude: Number(newGeoArr[0]), 
     longitude: Number(newGeoArr[1]) 
     }; 
     geolocation.getCurrentPosition(position => { 
     const currentLocation = { 
      latitude: position.coords.latitude, 
      longitude: position.coords.longitude 
     }; 
     const distanceArr = geolib.orderByDistance(currentLocation, [ 
      item.distance 
     ]); 
     const miles = (distanceArr[0].distance/1609.34).toFixed(2); 
     if (miles <= userRadius) { 
      markers.push({ 
      position: item.position, 
      number: i, 
      content: item.description, 
      showInfo: false 
      }); 
      callback(markers); 
     } 
     }); 
    } 
    }); 
    callback(markers); 
} 

関数を呼び出した後、コールバックの内側に、あなたは応答にsetStateを使用することができます。

submitRadius(items, userRadius, (err, response) => { 
    if(err){ 
    console.log(err) 
    } else { 
    this.setState({ markers : response}) 
    console.log(response) 
    } 
}); 

私はあなたの関数でgeolocationだかわからないんだけど。 submitRadius.jsファイル内にインポートする必要があります。

Answer 2

あなたは、単にそれが 引数としてコールバック関数をとるようなあなたの関数を定義します。例えば：

submitRadius(radius, callback) { 
    ... do stuff such that err and response will be produced .... 
    callback(err, response); 
} 

は、次にように、あなたの関数を呼び出す：

... do stuff 
submitRadius(radius, (err, response) => { ... }) 

私はコールバックを供給することは、単純なシナリオでのみ読みやすいよう、あなたが、しかし約束に見て、強くお勧めします。物事が複雑になると、約束（または非同期/待機）がより簡単に管理できます。