this.props에서 소품에 액세스 할 때 반환 값은 null입니까?

Question

내 작업/축소/저장 등을 만들었습니다. mapStateToPros를 Shop 구성 요소에 전달할 때 내 소품에 액세스 할 수 있습니다. 특히이 구성 요소에서 this.props.auth를 사용하여 로그온 한 현재 사용자를 찾으려고합니다. 사용자에게는 기본적으로 false 인 isAdmin 소품이 있습니다. 내가 this.props.auth.isAdmin을 호출하면 null을 반환합니다.

사용하여 노드/내 백엔드/MongoDB를 표현

localhost error img

Shop Component top img

Shop Component bottom img

Actions for Reducer

Reducer

Answer 1

여기 https://i.stack.imgur.com/TRvKP.png 당신의 감속기의 스크린 샷을 감안할 때, 나는 이런 식으로 뭔가를 시도 할 것입니다 : 구성 요소에서 예상되는 것과 일치하는 방식으로 인증 감속기에

// authReducer.js 
const initialState = { 
    auth: { 
    isAdmin: false, 
    }, 
    isLoggedOn: false 
} 

// create a default schema for you state rather than defaulting to null 
export default function (state = initialState, action) { 
    // the rest of your code 
} 

이 의지 설정 초기 REDUX 상태. 각 작업에 대한

, FETCH_USER 및 LOGOUT_USER, 새로운 상태를 설명하는 몇 가지 속성을 가진 객체를 반환 할 것입니다,하지만 당신은 현재 그것을 설정이 곳 LOGOUT_USER 반환 완전히 다른 데이터 형식 (부울)입니다 false을하고 무엇을 난 당신이 인증 상태 (일반적으로 youd 개체를 원한다)의 표현으로가는 것 같아요. 상태 변화와

는 일반적이고 편리한 패턴은 새와 이전 상태를 병합 새로운 객체를 반환하는 것입니다, 그래서 당신은 행동이 같은 끝낼 수 :

case LOGOUT_USER: 
    return { ...state, action.payload } 

이 보장하지만 귀하의 redux 상태는 항상 특정 도형을 따르며 구성 요소의 소품에 대해 null/undefined 오류를 방지하는 데 도움이됩니다.

다른 환경에서 isAdmin 속성을 true로 업데이트하는 작업을 보낼 수 있습니다.