Immutable.js не отображает данные списка

Question

Мой редуктор выглядит так:

import { fromJS } from 'immutable';
const GET_LIST = 'GET_LIST';

const initialState = fromJS({
  list: [{
         ID: 1
  },
  {
    ID: 2
}]
});

function reducer(state = initialState, action) {
  switch (action.type) {
    case GET_LIST:
      return state
        .set('list', action.payload);
    default:
      return state;
  }
}
export default reducer;

Вот так выглядит мой компонент:

class App extends Component {

    render () {
        return ( 
        <div className="container">  
        <table className="table table-striped">

          <tbody >                          

              {this.props.list.map(item => {
                console.log('Item: ' + item.get('ID'))
                return (
                  <div>{item.get('ID')}</div>
                );
              })}
           </tbody>
        </table>
      </div>
        );
    }
}

const mapStateToProp = (state) => {
  console.log('state list: '+ state.reducer.get('list') );
    return {
      list: state.reducer.get('list'),
    }
  }

Проблема в том, что я пытаюсь перебрать this.props.list ', но это не рендеринг данных на моей html-странице.Но когда я пытаюсь сохранить console.log в списке, он отображает данные в консоли браузера, но данные не отображаются на html-странице.Я хочу показать данные initialState на странице.

Вот как они отображаются в консоли:

Пожалуйста, у кого-нибудь есть решение для этого.Я надеюсь, что все поняли вопрос.