親コンポーネントのレンダー機能を呼び出していない状態の更新です。 React/Redux

Question

私は という3つのコンポーネントを親で宣言し、コールバックを取得するためにそれを子に送信し、子コンポーネントがそのメソッドを子に送信しています。

この機能は、ドロップダウン選択の変更、およびリデューサからの状態の更新に呼び出されています。状態を更新した後、レンダリング関数が呼び出されることはありません。

1]親方法

 onChangeTrackList(id, key) { 
    if(id) { 
     this.selectKey = key 
     console.log(id+'comp'+key) 
     this.props.fetchLiveRaceVideo(id, key) 
    } 
} 

And passing this to below child 

<LiveVideoPanel key = {key} onChangeTrackList = {this.onChangeTrackList.bind(this)}/> 

2]子要素 - 子供が他の方法でこのメソッドを呼び出して、他の子に小道具としてそのメソッドを通過します。

 _onChangeTrackList(key, trackId) { 
    if(trackId) { 
     this.props.onChangeTrackList(trackId, key) 
    } 
} 

<ReactSelect onChange = {this._onChangeTrackList.bind(this, this.props.videoCount)} /> 

これで、リデューサーの状態が正常に機能し更新されています。 しかし、私の親コンポーネントのレンダリング関数は、減速機で状態を更新した後でも呼び出されていません。

import actions from 'actions' 

export const liveTrackVideo = (state = [] , action) => { 
switch(action.type){ 
    case actions.GET_LIVE_RACE_VIDEO_FAILURE: { 
     return { 
      isFetchingLiveRaceVideos: false, 
      fetchLiveRaceVideosErrors: action.error, 
      liveRaceVideos: [action.liveRaceVideos] 
     } 
    } 
    // Below is response (I am getting updated state from here) 
    case actions.GET_LIVE_RACE_VIDEO_PANEL_SUCCESS: 
    { 
     state.liveRaceVideos[action.index] = Object.assign(action.liveRaceVideos, {'index': action.index}) 

     return Object.assign({}, state, { 
      isFetchingLiveRaceVideos: false, 
      fetchLiveRaceVideosErrors: null, 
      liveRaceVideos: state.liveRaceVideos 
     }) 
    } 
    case actions.TOGGLE_VIDEO: 
     { 
      return Object.assign({}, state, { 
       isFetchingLiveRaceVideos: false, 
       fetchLiveRaceVideosErrors: null, 
       liveRaceVideos: [...state.liveRaceVideos, {'error': 0 , 'link' : ''}] 
      }) 
     } 
    default : 
     return state 
} 

}

Answer 1

あなたの親コンポーネントにストアを更新する機能を渡しているようだ - 以下

は、このアクション

import { connect } from 'react-redux' 
import Wagers from 'pages/wagers' 
import { getWagers } from 'actions/wagers' 
import {getAccountBalance} from 'actions/authentication' 
import { fetchLiveRaceVideo, toggleVideosx} from 'actions/liveTrackVideo' 

    const mapStateToProps = (state) => { 
    return { 
     liveRaceVideos: state.liveTrackVideo.liveRaceVideos 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    fetchLiveRaceVideo: (track, index) => {  dispatch(fetchLiveRaceVideo(track, index)) }, 
    toggleVideosx:() => { dispatch(toggleVideosx())} 
} 
} 

const wagers = connect(
    mapStateToProps, 
    mapDispatchToProps) 
(Wagers) 

    export default wagers 

リデューサーを派遣している私のコンテナコードですあなたは店舗の更新を減らすために購読していません。

それはこのようになります。また

connect(
    (state) => ({yourKey: state...}), 
    (dispatch) => ({fetchLiveRaceVideo: (id, key) => dispatch(...)}) 
)(LiveVideoPanel) 

、あなたの減速に渡す状態は不変であると考えられます。 liveRaceVideosキーを次のように更新してください。

const newLiveRaceVideo = Object.assign(action.liveRaceVideos, {'index': action.index}) 

return Object.assign({}, state, { 
    isFetchingLiveRaceVideos: false, 
    fetchLiveRaceVideosErrors: null, 
    liveRaceVideos: state.liveRaceVideos.slice(0, action.index).concat(newLiveRaceVideo, ...state.liveRaceVideos.slice(action.index + 1)) 
} 

Answer 2

liveRaceVideos変数の参照は変更されていません。あなたの場合はこのようにする必要があり

：

var liveRaceVideos = state.liveRaceVideos || []; 
liveRaceVideos = [...liveRaceVideos]; 
liveRaceVideos[action.index] = Object.assign(action.liveRaceVideos, {'index': action.index}); 
return Object.assign({}, state, { 
      isFetchingLiveRaceVideos: false, 
      fetchLiveRaceVideosErrors: null, 
      liveRaceVideos: liveRaceVideos 
     })