реквизиты не передаются компенсаторам после внедрения combReducers в реакции-редукции

Question

Я пытаюсь передать реквизиты нескольким компонентам с помощью реакции-редукта. Данные, которые я получаю и пытаюсь передать, - это база данных, поэтому задействована асинхронность. Поскольку реквизит не определяется при попадании на компонент, мое приложение бросает неопределенную ошибку. После того, как он выдает ошибку в компоненте, он продолжает разрешать состояние, но как только состояние определено, оно не перезаписывает компонент с новыми реквизитами. Другой самородок ... Я использую combReducers. Перед использованием combReducers (только с помощью редуктора) у меня не было этой проблемы. Это началось после того, как я сделал еще один редуктор и объединил его с (редуктором). Любая идея, что здесь происходит? Почему мой компонент не будет повторно отображаться?

Вот мой контейнер, который оказывает компоненты:

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 {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 {combineReducers} from 'redux' 
import baby from './baby-reducer' 
import parent from './parent-reducer' 



export default combineReducers({ 
    baby, 
    parent 

}) 

Вот мой вес компонент:

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 действий; массив», но BabyProfileContainer и компоненты повторно не отдающий после получения.

любая помощь будет принята с благодарностью. Спасибо!

Answer 1

Попробуйте это в редукторе. Точно так же перебирать один и тот же код для других типов действий.

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