내가 노력하고 mapStateToProps

를 작동하지 단순히 종류가 댄 아브라모프의 Egghead.io 비디오에서 수행되는 방식과 유사 mapStateToProps에서 REDUX 데이터를 저장,에 : https://egghead.io/lessons/javascript-redux-colocating-selectors-with-reducers 내가 노력하고 mapStateToProps

내 문제는 처음에는 상태가 undefined로 반환되기 때문에 (비동기식으로 가져온 것처럼)이 문제를 처리하는 가장 좋은 방법은 무엇일까요? 내가 transactions.all 처음에 때문에 감속기에서 설정 한 초기 상태의 (코드가 작동 할 의미) 빈 상태 (empty)의 배열이되어야한다고 생각

const diff = (a, b) => { 
    if (a.name < b.name) { 
    return -1 
    } 
    if (a.name > b.name) { 
    return 1 
    } 
    return 0 
} 

const mapStateToProps = (state) => { 
    return { 
    transactions: _.sort(diff, state.transactions.all), 
    expenditure: state.expenditure.all, 
    income: state.income.all 
    } 
}

: 현재 코드는 다음과 같이 (_가 ramda 라이브러리입니다)입니다

const INITIAL_STATE = { transactions: { all: [] }, transaction: null } 

export default function (state = INITIAL_STATE, action) { 
    switch (action.type) { 
    case FETCH_TRANSACTION: 
     return { ...state, transaction: action.payload.data } 
    case FETCH_TRANSACTIONS: 
     return { ...state, all: action.payload.data } 
    case EDIT_TRANSACTION: 
     return { data: action.data } 
    case ADD_TRANSACTION: 
     return { data: action.data } 
    case DELETE_TRANSACTION: 
     return { ...state } 
    default: 
     return state 
    } 
}

미리 감사드립니다.

출처

2017-01-27 zeKoko

확실치 않지만 INITIAL_STATE에는 'transations'키가 없으므로 '_.sort (diff, state.all)'가 아니어야합니다. –

흠 ... 그렇습니다 ... 다른 감속기에도 모두가 있습니다. 그래서 아마도 각각에 대해 더 명시 적으로 표현해야합니다. defaultState = {transactions : {all : []}, 지출 : {all : [}}}; 고마워, 내가 이것을 시도합니다 – zeKoko

당신이 말했듯이, 그것은 비동기 적으로 가져옵니다. 아마도 구성 요소가 렌더링 될 때 데이터가 아직 준비되지 않았기 때문에 결과가 정의되지 않은 객체가됩니다. 여기에 문서에 댄 자신을 설명 된대로

const SampleComponent = (props) => { 
    if(props.transaction === undefined) 
    return <Spinner /> // Loading state 
    else 
    // your implementation 
}

당신은 더 코드 청소기를 만들 수 있습니다 http://redux.js.org/docs/advanced/AsyncActions.html

출처

2017-01-27 11:15:09 pierreg

감사합니다 pierreg하지만 감속기의 기본 상태는 비동기 작업이 데이터를 반환하기 전에 처음에는 빈 배열로 .all을 초기화하므로 코드가 오류가 아니어야합니다. – zeKoko

transactions.all은 초기 상태가 아닙니다. (트랜잭션 : null)은 객체의 전체 모양이 아닙니다. 초기 상태를 (transaction : {all : []}}로 수정하거나 정렬 작업을 수행하기 전에 트랜잭션이 null이 아닌지 확인할 수 있습니다. 두 가지 방법으로 모두 수행 할 수 있습니다. – pierreg

감속기를 결합에서, 그때의 이름 transactions과 함께 거래를 설정했기 때문에

는이 문제를 해결하기 위해 관리 감속 기, 나는 기본적으로 transactions: { all: [] } }으로 설정된 초기 상태를 가졌습니다.

정확한 상태 구조가 실제로 state.transactions.transactions.all 이었기 때문에 이로 인해 state.transactions.all이 정의되지 않았습니다. 에 거래 감속기를 업데이트하지 후

: 더 이상 정렬을 의미 반환하는 약속을하기 전에

const INITIAL_STATE = { all: [], transaction: null } 

export default function (state = INITIAL_STATE, action) { 
    switch (action.type) {...

초기 빈 거래 배열 오류가 발생하고 올바르게로드에 정렬됩니다.

출처

2017-01-27 20:42:52 zeKoko

내가 노력하고 mapStateToProps

답변

관련 문제