Reduxでstateをreducer経由で変更しても再レンダリングされない

Question

前提・実現したいこと

いつもお世話になってます。この度ReactにReduxを導入すべき基本的なReduxによるstate更新と再レンダリングまで行いたいと思い、まずは最低限Reduxを導入 → Redux経由でstate変更 → DOMに反映

まで行いたいです。

サンプルとして、↓スクショの「LIKE!」 をクリックすると、その下の文言が変わるコードを書いています。

発生している問題・エラーメッセージ

Redux経由でstate変更まではできているが、DOMに反映されない

該当のソースコード

import { connect } from 'react-redux';
import * as actions from '../actions/Index';
import Index from '../components/Index';

const mapStateToProps = state => {
  return {
    user: state.user,
    emojies: state.emojies,
    liked: state.liked,
  }
}

const mapDispatchToProps = dispatch => {
  return {
    getEmojies: () => dispatch(actions.getEmojies()),
    addLike: () => dispatch(actions.addLike()),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Index)

import React, { Component, PropTypes } from 'react';

export default class Index extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount = (props) => {
    this.props.getEmojies
  }

  render() {
    // StoreのTodoからリストを生成
    // const list = this.props.emojies.map((emoijes, index) => <li key={index}>{source}</li>)
    console.log(this.props.state) // ←ここでstate更新できていることは確認できる
    let liked = this.props.state ? 'LIKED!' : 'NO LIKED > <';
    return (
      <ul className="panel panel-default">
        <p onClick={this.props.addLike}>LIKE!</p>
        {liked}
      </ul>
    );
  }
}

const GET_USER = 'GET_USER'
const GET_EMOJIES = 'GET_EMOJIES'
const ADD_LIKE = 'ADD_LIKE'

export const getEmojies = () => {
  return {
    type: GET_EMOJIES,
  };
}

export const addLike = () => {
  return {
    type: ADD_LIKE
  };
}

import Api from '../helpers/api'

const initialState = {
  user: [],
  emoji: [],
  liked: false
}

export const indexReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'GET_EMOJIES':
      // 新しく追加するTODO
      // stateを複製して追加
      let emojies = { 0: { 'name': 'name' }, 1: { 'name': 'bbbbbbb' } }
      const newEmojies = Object.assign({}, state, emojies)

      return newEmojies
    case 'ADD_LIKE':
      const newLike = Object.assign({}, state, { liked: true })
      console.log(newLike);
      return newLike
    default:
      return state
  }
}

import { createStore as reduxCreateStore, applyMiddleware, combineReducers } from "redux";
import logger from "redux-logger";
import { indexReducer } from "./reducers/Index";
import createSagaMiddleware from 'redux-saga';

export default function createStore() {
  const sagaMiddleware = createSagaMiddleware()
  const store = reduxCreateStore(
    combineReducers({
      state: indexReducer,
    }),
    applyMiddleware(
      logger,
      sagaMiddleware
    )
  )

  return store;
}

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

import Index from './containers/Index'

import { Provider } from 'react-redux';
import createStore from './createStore';

const store = createStore();

export default class Root extends Component {
  render() {
    return (
      <div className="container">
        <Index />
      </div>
    );
  }
}

if (document.getElementById('root')) {
  ReactDOM.render(
    <Provider store={store}>
      <Root />
    </Provider>,
    document.getElementById('root'));
}

といったコードで群でstateの更新をしており、componentでstateの更新を確認できています。

試したこと

Reducerでのshallow equal対策として、returnするオブジェクトは新規に作成しなおす

case 'ADD_LIKE':
      const newLike = Object.assign({}, state, { liked: true })

↓の質問にあるpropToStateの修正
https://teratail.com/questions/61126

全く原因がわからず困っておりますので、何かお気付きの方はご教授いただけますと幸いです。

よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

 "devDependencies": {
        "@babel/plugin-proposal-class-properties": "^7.5.5",
        "@babel/preset-react": "^7.0.0",
        "axios": "^0.19.0",
        "cross-env": "^5.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0"
    },
    "dependencies": {
        "react-redux": "^7.1.1",
        "redux": "^4.0.4",
        "redux-logger": "^3.0.6",
        "redux-saga": "^1.0.5"
    }

Answer 1

オブジェクトの形を理解を再確認したら上手くいきました。
具体的には

    combineReducers({
      state: indexReducer,
    }),

この部分が複数のreducerを合体させる前提だったので、プレフィックス「state」にしていることを認識できていなかったため、

const mapStateToProps = state => {
  return {
    user: state.state.user,
    emojies: state.state.emojies,
    liked: state.state.liked,
  }
}

のネストをstate.stateにすることで、

render() {
    // StoreのTodoからリストを生成
    // const list = this.props.emojies.map((emoijes, index) => <li key={index}>{source}</li>)
    console.log(this.props.state) 
    let liked = this.props.liked ? 'LIKED!' : 'NO LIKED > <';// ←ここでstate更新できていることは確認できる
    return (
      <ul className="panel panel-default">
        <p onClick={this.props.addLike}>LIKE!</p>
        {liked}
      </ul>
    );
  }

let likedで解決できました！