Reducers 状态更新不调用父组件的渲染函数。反应/还原

Question

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

该函数在下拉选择的更改以及从 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 ] 子组件 - Child 在其他方法中调用此方法并将该方法作为道具传递给其他孩子。

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

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

现在它可以正常运行并在 reducer 中更新状态。 但是即使在 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))
}