Bdtjtk

I have a main reducer (byVideoIds), which which generates a dynamic key name based on action.videoId. This object will contact a list of comments. I have normalized the subreducer for comments byIds (object by comment ids), allIds (array of comment ids associated with the video), as well as showing pagination stuff and isFetching.

The issue i am facing and cannot track down, is on comment delete action DELETE_COMMENT_SUCCESS, my state tree is not updated and the array of allIds does not change. As a result my UI is not re-rendered with the changes.

Am i using the combinedREducers correctly here by calling combineReducersComments inside of byVideos reducer. I don't know if the state, action need to be passed here as well on the same line.

With the code below my state tree is loaded correctly and comment data for each video is displayed, however on delete action, the UI is not updated.

If combinedReducers cannot be used this way. What are my options to set the initial state for a [videoId]?

const byVideoIds = (state = {}, action) => {

  const { videoId } = action;

  switch (action.type) {

    case GET_COMMENTS_REQUEST:

      return {

        ...state,

        [videoId]: combineReducersComments(state[videoId], action)

      };

    case GET_COMMENTS_SUCCESS:

      return {

        ...state,

        [videoId]: combineReducersComments(state[videoId], action)

      };

    default:

      return state;

  }

};



//--------------------------------------------------------

const byIds = (state = {}, action) => {

   const { comments } = action;

 switch (action.type) {

    case GET_COMMENTS_SUCCESS:

      return {

        ...state,

        ...comments.reduce((obj, comment) => {

          obj[comment.id] = comment;

          return obj;

        }, {})

      };

    default:

      return state;

  }

};



const allIds = (state = , action) => {

  switch (action.type) {

    case GET_COMMENTS_SUCCESS:

      return action.comments.map(comment => comment.id);

    case DELETE_COMMENT_SUCCESS:

       return state.filter(id => id !== action.commentId);

    default:

      return state;

  }

};



const page = (state = 1, action) => {

  switch (action.type) {

    case GET_COMMENTS_SUCCESS:

      return state + 1;

    default:

      return state;

  }

};



const totalPages = (state = null, action) => {

    switch (action.type) {

        case GET_COMMENTS_SUCCESS:

      return action.totalPages;

    default:

      return state;

  }

};



const isFetching = (state = false, action) => {

  switch (action.type) {

    case GET_COMMENTS_REQUEST:

      return true;

    case GET_COMMENTS_SUCCESS:

    case GET_COMMENTS_FAILURE:

       return false;

    default:

      return state;

  }

};





const combineReducersComments = combineReducers({

  byIds,

  allIds,

  page,

  totalPages,

  isFetching

});