react-redux에서 combineReducers를 구현 한 후 소품이 compenents에 전달되지 않음

Question

react-redux를 사용하여 여러 구성 요소에 소품을 전달하려고합니다. 전달하고 전달하려는 데이터는 데이터베이스에서 가져온 것이므로 비동기 성이 관련됩니다. 소품은 구성 요소를 때 때 정의되지 않기 때문에, 내 애플 리케이션은 정의되지 않은 오류를 던지고있다. 구성 요소에 오류가 발생하면 상태를 계속 확인하지만 일단 상태가 정의되면 새 소품으로 구성 요소를 다시 렌더링하지 않습니다. 또 다른 너겟은 ... combineReducers를 사용하고 있습니다. combineReducers를 사용하기 전에 (아기 감속기를 사용하기 만하면)이 문제가 발생하지 않았습니다. 그것은 내가 다른 감속기를 만들고 그것을 (아기 감속기)와 결합시킨 후에 시작되었습니다. 여기서 무슨 일이 벌어지고 있는지 알 수 있습니까? 내 구성 요소가 왜 다시 렌더링되지 않습니까? 여기

import React,{Component} from 'react' 
import store from '../store' 
import {connect} from 'react-redux'; 
import BabyProfile from '../components/BabyProfile' 
import Weight from '../components/Weight' 
import Height from '../components/Height' 
import Feed from '../components/Feed' 
import Sleep from '../components/Sleep' 
import Diaper from '../components/Diaper' 


class BabyProfileContainer extends Component { 

    render(){ 
    // console.log("RENDER PROPS", this.props) 
    const {baby, weight, height, feed, sleep, diapers} = this.props 

    return(
     <div> 
     <BabyProfile baby={baby}/> 
     <Weight weight={weight}/> 
     <Height height={height}/> 
     <Feed feed={feed}/> 
     <Sleep sleep={sleep}/> 
     <Diaper diapers={diapers}/> 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    // console.log("MSTP Baby Container", state, "OWN PROPS", ownProps) 
    return { 
    baby: state.baby, 
    diapers: state.diapers, 
    weight: state.weight, 
    height: state.height, 
    sleep: state.sleep, 
    feed: state.feeding 
    } 
} 



export default connect(mapStateToProps)(BabyProfileContainer) 

내 아기 감속기입니다 : 여기

렌더링 구성 요소입니다 내 컨테이너

다음

import {combineReducers} from 'redux' 
import baby from './baby-reducer' 
import parent from './parent-reducer' 



export default combineReducers({ 
    baby, 
    parent 

}) 

내 무게 : 여기

import {RECEIVE_BABY} from '../constants' 


const initialBabyState = { 
    baby: {}, 
    diapers: [], 
    weight: [], 
    height: [], 
    feeding: [], 
    sleep: [] 

} 

export default function(state = initialBabyState, action){ 
console.log('BABY REducer') 

const newState = Object.assign({}, state) 

    switch (action.type){ 

    case RECEIVE_BABY: 
    newState.baby = action.baby; 
    newState.diapers = action.diapers 
    newState.weight = action.weight; 
    newState.height = action.height; 
    newState.feeding = action.feeding; 
    newState.sleep = action.sleep 

    break; 




    default: 
     return state 

    } 
    return newState 

} 

내 combinedReducer입니다 구성 요소 :

여기

import React from 'react'; 
import {Line} from 'react-chartjs-2' 


export default function(weight){ 


console.log("IN WEIGHT", weight) 
var weightArr = weight.weight 

const weightData = { 
    labels: weightArr.map(instance=>instance.date.slice(0,10)), 
    datasets:[{ 
    label: "baby weight", 
    backgroundColor: 'rgba(75,192,192,1)', 
    data: weightArr.map(instance =>(instance.weight)) 
    }] 
} 

const options ={ 

    maintainAspectRatio: false, 
    xAxes: [{ 
     stacked: true, 
       ticks: { 
        beginAtZero:true 
       } 
      }], 
    yAxes: [{ticks: { 
     beginAtZero:true 
    } 
    }] 
    } 



return (
    <div className="baby"> 
    <div> 
     <h3>I'm In weight component</h3> 
    </div> 
    <div className="weight"></div> 
    { 
    weightArr.map((weight,index) => (
     <div key={index}> 
     <span>{ weight.weight}</span> 
     </div> 
    )) 

    } 
    <div className="Chart"> 
    <Line data={weightData} width={200} height={200} options={options}/> 
    </div> 
    </div> 
); 
} 

내 행동의 창조자이다 :

import {RECEIVE_BABY} from '../constants' 
import axios from 'axios' 



export const receiveBaby = (baby,weight,height,sleep,diaper,feeding) =>({ 
    type: RECEIVE_BABY, 
    baby: baby, 
    weight: weight, 
    feeding: feeding, 
    height: height, 
    sleep: sleep, 
    diapers: diaper 

}) 



export const getBabyById = babyId => { 
    console.log("GET BABY BY ID") 
    return dispatch => { 
    Promise 
     .all([ 
     axios.get(`/api/baby/${babyId}`), 
     axios.get(`/api/baby/${babyId}/weight`), 
     axios.get(`/api/baby/${babyId}/height`), 
     axios.get(`/api/baby/${babyId}/sleep`), 
     axios.get(`/api/baby/${babyId}/diaper`), 
     axios.get(`/api/baby/${babyId}/feed`) 
     ]) 
     .then(results => results.map(r => r.data)) 
     .then(results => { 
     console.log("THIS IS RESULTS in Action assadkjasdfkjl;", results) 
     dispatch(receiveBaby(...results)); 
     }) 
     .catch(function(err){ 
     console.log(err) 
     }) 
    }; 
}; 

Here is chrome dev tools. You can see "In Weight" {weight: "undefined"} is creating the issue

당신은 내가 바로이 액션 assadkjasdfkjl 결과 IS '를 통해 오류가 발생한 후 상태를받을 것을 볼 수 있습니다; 배열 "하지만 BabyProfileContainer 및 구성 요소 다시 렌더링되지 않습니다 수령 후.

어떤 도움을 주시면 감사하겠습니다. 감사합니다!

Answer 1

당신의 감속기이보십시오. 마찬가지로 다른 행동 유형에 대해 동일한 코드를 반복.

을

case RECEIVE_BABY: 
    return {...state, baby: action.baby}; 
    default: 
    return state;