jaki jest najlepszy sposób radzenia sobie z nieokreślonymi rekwizytami w pliku react.js?

Question

Załóżmy, że mam akcję, która zostanie wywołana podczas ładowania strony, np. Powiedz, w pliku index.js.

przykład

store.dispatch(loadData()); 

w moim reduktora zainicjować stan się do obiektu. Coś takiego

function myReducer(state = {}, action) 

teraz mam trochę inteligentny komponent, który subskrybuje do mojego stanu, a następnie przekazuje je do innego składnika do wyświetlania danych. Inną ważną informacją dla tego scenariusza jest fakt, że pobieranie danych odbywa się asynchronicznie. Załóżmy również, że kluczem tego obiektu jest jakaś tablica. Więc składnik markup miałby coś takiego

{this.props.object.key.map(k => do something)} 

Teraz ponieważ klucz jest niezdefiniowany nie mogę nazwać mapa na nim i wysadzić. Sposób, w jaki sobie z tym poradzę, polega na użyciu prostej kontroli. Jeśli klucz jest zdefiniowany, uruchom .map, w przeciwnym razie zwróć wartość null. Następnie, zanim moje dane zostaną odzyskane z serwera, renderowanie zostanie ponownie wywołane ze względu na zmianę stanu, w którym subskrybował ten składnik. W tym momencie definiowany jest klucz i można wywołać mapę.

Innym podejściem jest określenie, jak będzie wyglądał twój stan w reduktorze. Innymi słowy, jeśli wiem, że mój stan będzie obiektem z właściwością tablicy, mógłbym zrobić coś takiego.

const initialState = { 
    key:[] 
} 

function myReducer(state = initialState, action) 

Wykonanie tej czynności przyniesie korzyści, ponieważ teraz nie będę potrzebował mojej kontroli, ponieważ klucz nigdy nie jest niezdefiniowany.

Moje pytania są; czy któreś z tych podejść jest lepsze od innych? A może jest jeszcze inny sposób, aby sobie z tym poradzić?

Answer 1

Ogólnie rzecz biorąc, podejście, które chciałbym podjąć, to określenie domyślnych rekwizytów na komponencie, które mają semantyczne znaczenie "puste". Na przykład, w kontekście problemu można opisać bym zazwyczaj struktury mój składnik tak (ES6 klas stylu):

class MyComponent extends React.Component { 
    static defaultProps = { 
     object: { 
      key: [] 
     } 
    }; 

    ... 

    method() { 
     // this.props.object.key is an empty array, but is overriden 
     // with a value later after completion of the reducer 
     // (trigerred asynchronously) 
     this.props.object.key.map(doSomething); 
    } 
} 

ten jest stosunkowo czysty, zapobiega kod rzuca w czasie wykonywania, a siły na tworzenie dobrze zdefiniowane zachowania dla semantycznie pustych, pustych lub niezdefiniowanych stanów wejściowych.