reducer状态更新不调用父组件的渲染函数.反应/回家的

Question

我有三个组件，其中我在父组件中声明了一个函数，并将它发送给子组件以获得回调，而子组件将该方法发送给它的子组件。

这个函数在下拉选择改变时被调用，并且从reducer更新状态。但是在更新状态之后，渲染函数没有被调用。

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)} />

现在这是正常运行和更新状态的减速机。但是我的父组件的渲染函数没有被调用，甚至在更新状态后，在reducer。

下面是我的容器代码，它调度这个动作

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

减速器-

 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

您不能更改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
        })

Answer 2

似乎正在将更新存储的函数传递给父组件，但您没有订阅redux存储更新。

它看起来像这样:

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

同样，传递给reducer的状态应该是不可变的。尝试将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))
}