Lazerli yükleme referansları normalize edilmiş Redux deposundan

Question

Yo! Redux ve Normalizr kullanıyorum. Ben ile çalışıyorum API şuna benzer nesneleri aşağı gönderir:

{ 
    name: 'Foo', 
    type: 'ABCD-EFGH-IJKL-MNOP' 
} 

veya bu

{ 
    name: 'Foo2', 
    children: [ 
    'ABCD-EFGH-IJKL-MNOP', 
    'QRST-UVWX-YZAB-CDEF' 
    ] 
} 

gibi uyumsuz olanlar ilgili varlıkları (type ve children) getirmesi mümkün istediğinizde Yukarıdaki nesneler, durumdan erişilebilir (mapStateToProps). Ne yazık ki, bu eylemleri aramak için doğru yer değil mapStateToProps olarak Redux yolu ile örgü görünmüyor. Bu davaya baktığım (tüm verilerimi önceden getirme hariç) açık bir çözüm var mı?

Answer 1

Ben doğru kullanım senaryosunu anlamış, ancak veri getirme istiyorsanız, basit bir ortak yol Tepki bileşenden onu tetiklemek için olduğunu emin değil:

var Component = React.createClass({ 
    componentDidMount: function() { 
     if (!this.props.myObject) { 
      dispatch(actions.loadObject(this.props.myObjectId)); 
     } 
    }, 

    render: function() { 
     const heading = this.props.myObject ? 
      'My object name is ' + this.props.myObject.name 
      : 'No object loaded'; 
     return (
      <div> 
       {heading} 
      </div> 
     ); 
    }, 
}); 

"myObjectId" prop Verilen , bileşen montajdan sonra "myObject" getirmeyi tetikler. (Bu desen hakkında daha fazla ayrıntı için Redux's doc bakınız)

Başka bir ortak yolu bir Redux zaman uyumsuz işlem yaratıcısı, zaten burada değilse, veri getirmek için olacaktır:

// sync action creator: 
const FETCH_OBJECT_SUCCESS = 'FETCH_OBJECT_SUCCESS'; 
function fetchObjectSuccess(objectId, myObject) { 
    return { 
     type: FETCH_OBJECT_SUCCESS, 
     objectId, 
     myObject, 
    }; 
} 

// async action creator: 
function fetchObject(objectId) { 
    return (dispatch, getState) => { 
     const currentAppState = getState(); 
     if (!currentAppState.allObjects[objectId]) { 
      // fetches the object if not already present in app state: 
      return fetch('some_url_.../' + objectId) 
       .then(myObject => (
        dispatch(fetchObjectSuccess(objectId, myObject)) 
       )); 
     } else { 
      return Promise.resolve(); // nothing to wait for 
     } 
    }; 
}