초기 상태는 redux로 연결되지 않았습니다. 반응 앱

Question

Redux를 사용하여 저장소를 관리하는 ReactJs 앱이 있습니다. 제 주정부는 복잡한 파일을 보관할 수있는 복잡한 json입니다. 내가 감속기를 시작할 때, 서버에서 컨텐트를 가져 오기 전에 액세스 할 때 다른 초기 상태를 지정해야합니다. 'undefined'오류가 발생합니다. 다음은 예입니다

fetchContent() 나던이 시점에서 호출 할 것 때문에 처음 구성 요소의 처음 상태는, state.reducer1.a.b.c이 정의가 발생 지금

//Test.jsx 
 
class Test extends React.Component{ 
 
    componentWillMount(){ 
 
     fetchContent({ 
 
     type: SET_CONTENT 
 
     }); 
 
    } 
 
    render(){ 
 
     return(
 
     <div> {this.props.header} </div> 
 
    ) 
 
    } 
 
    mapStateToProps(state){ 
 
     return{ 
 
     header: state.reducer1.a.b.c 
 
     } 
 
    } 
 
} 
 
export default (mapStateToProps)(Test); 
 

 

 
//reducer1.js 
 
export default function reducer1(state = {}, action = {}) { 
 
    switch (action.type) { 
 
    case SET_CONTENT: 
 
     return Object.assign({}, action.data); 
 
    default: 
 
     return state; 
 
    } 
 
} 
 
    
 
//reducer2.js 
 
export default function reducer2(state = {}, action = {}) { 
 
    switch (action.type) { 
 
    case SET_SOMETHING_ELSE: 
 
     return Object.assign({}, action.data); 
 
    default: 
 
     return state; 
 
    } 
 
} 
 
    
 
//CombinedReducer.js 
 
export default combinedReducers(Object.assign({}, {reducer1}, {reducer2}))

.

제 질문은 어떻게 해결합니까? 감속기의 초기 상태를 지정하는 것이 유일한 옵션입니까? 다음과 같은

//reducer1.js 
 
export default function reducer1(state = { a: { b: { c: "somedata"}}}, action = {}) { 
 
    switch (action.type) { 
 
    case SET_CONTENT: 
 
     return Object.assign({}, action.data); 
 
    default: 
 
     return state; 
 
    } 
 
}

Answer 1

당신 수 그렇게하지만, 당신은 또한 단지 첫 번째 키의 존재를 확인하기 위해 mapState 기능을 업데이트 할 수 있습니다. , 당신이 파견 누락

class C { 
    ... 
} 

function mapStateToProps (state) {} 

connect(mapStateToProps)(C) 

마지막으로 : 당신이 connect에 전달하고 구성 요소에 특정하지 함수의로

function mapStateToProps(state){ 
    return{ 
    header: state.reducer1.a ? state.reducer1.a.b.c : <div>Loading..</div> 
    } 
} 

또한 난 당신이 클래스 정의의 mapStateToProps 외부를 의미 가정 fetchContent 전화가 왔습니까? 이것은 redux-thunk를 사용하고 있습니까?

Answer 2

대부분의 경우 모든 응답 데이터를 축소기에 저장하지 않아야합니다. 상태 계층 구조는 JSON 응답의 계층 구조를 반복해서는 안됩니다.

그것은 나를 더 간단 감속기 만 c 변수를 저장하는 것입니다 :

//reducer1.js 

export default function reducer1(state = { c: undefined }, action) { 
    switch (action.type) { 
    case SET_CONTENT: 
     return Object.assign({}, state, { c: action.data.a.b.c }); 
    default: 
     return state; 
    } 
} 

을 또한, 당신은 당신의 코드에서 몇 가지 실수가 있습니다

기능은 클래스 의 외부에서 정의되어야한다

• mapStateToProps
• fetchContent 함수를 직접 호출하는 대신 결과를 전달해야합니다.

// Test.jsx 

class Test extends React.Component{ 
    componentWillMount(){ 
    dispatch(fetchContent({ 
     type: SET_CONTENT 
    })); 
    } 

    render() { 
    const { header } = this.props; 
    return header ? (
     <div>{header}</div> 
    ) : (
     <div>Loading...</div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    header: state.reducer1.c 
    } 
} 

export default (mapStateToProps)(Test);