Реактивному компоненту не удалось получить обновленное значение состояния

Question

Ниже мой компонент, я пытаюсь получить обновленное значение атрибута text из состояния. Но я не могу получить обновленное значение и вижу только значение по умолчанию:

 class MainPage  extends Component {
  render () {
    const { classes } = this.props;
    return (
      <div className="MainStyle">
      <Grid container spacing={3}>
      <Grid item xs={8}>
          <Paper className={classes.paper}>
              <AdvancedEars />
          </Paper>
        </Grid>
        <Grid item xs={4}>
          <Paper className={classes.paper}>
              <Clicker />
          </Paper>
        </Grid>
        <Grid item xs={12}>
          <Paper className={classes.whiteboard}>
           S: { this.state.text }
          </Paper>
        </Grid>
      </Grid>
    </div>
    );
  }
}

MainPage.propTypes = {
  classes: PropTypes.object.isRequired,
  text: PropTypes.string.isRequired,
};

const mapStateToProps = state => (()=>
{
  console.log('I AM HERE');
  console.log(state);
  return {
    text: state.text
  }
});

export default compose(
  withStyles(styles),
  connect(mapStateToProps)
)(MainPage);

Ниже приведен компонент, который изменяет состояние. И я вижу, как значение изменяется в состоянии в инструментах redux dev.

class Clicker  extends Component {
  render () {
    return (
      <Grid item xs={4}>
      <Button 
      variant="contained"
      color="primary"
      size="large"
      onClick={ this.props.saveData( "THIS IS ME" ) } >
          <Mic fontSize="large" />
      </Button>
  </Grid> 
    );
  }
}

const mapStateToProps = state => ({
  text: state.transcription
});


const mapDispatchToProps = dispatch => ({
  saveData: text => dispatch(saveText( { text } ))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Clicker);

Когда нажата кнопка, я могу видеть значение как THIS IS ME, но я не могу получить значение,все время пустоВот редуктор:

const defaultState = {
  text: ""
};

const transcribeReducer = (state = defaultState, action) => {
  switch (action.type) {
    case ActionTypes.TEXT_SAVE: {

      let { text } = action.payload;
      let newState = {
          ...state,
          text,
      }
      return newState;
    }

    default:
      return state;
  }
};

export default transcribeReducer;

Answer 1

mapStateToProps должна быть функцией, которая отображает состояние избыточности на реквизиты, передаваемые вашему компоненту.

const mapStateToProps = state => ({
   text: state.text
});

В вашем коде mapStateToProps - это функция, которая возвращает другую функцию, которая возвращает состояние:

const mapStateToProps = state => (()=>
{
  console.log('I AM HERE');
  console.log(state);
  return {
    text: state.text
  }
});