TypeError: state.getIn не является функцией

Question

Я использую неизменяемый объект в своем реактивном проекте, используя его с избыточностью, делая состояние неизменяемым объектом, используя функцию из JS () (из неизменяемой библиотеки). В моем файле редуктора все работает, я получаю действие, я могу установить новое значение, используя функцию setIn (), и я могу использовать функцию getIn () для доступа к состоянию.

Но когда я получаю состояние из соединения (), используя mapStateToProps, даже если console.log показывает явно неизменный объект, я не могу использовать неизменяемые функции, такие как Js () или getIn () здесь. Я всегда получаю эту ошибку: TypeError: state.getIn is not a function.

Мой индекс. js файл

import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import PropTypes from 'prop-types';
import Button from '@material-ui/core/Button';
import { template as templateAction } from './actions';
import withReducer from '../../../reducer/withReducer';
import templateReducer from './reducer';

export const Template = ({ name, template }) => (
  <Button onClick={template}>
    {name}
  </Button>
);

Template.propTypes = {
  name: PropTypes.string.isRequired,
  template: PropTypes.func.isRequired,
};

export const mapStateToProps = (state) => {
  console.log('state is equal to', state);
  return (
    {
      name: state.getIn(['templateReducer', 'name']),
    });
};

export const mapDispatchToProps = (dispatch) => ({
  template: () => dispatch(templateAction()),
});

export default compose(
  withReducer('templateReducer', templateReducer),
  connect(mapStateToProps, mapDispatchToProps),
)(Template);

Результат console.log (состояние)

Результат console.log (состояние)

PS: когда я не использую неизменное состояние , все работает хорошо.