магазин приставок не обновляется, а компонент не перерисовывается

Question

У меня вопрос по поводу использования приставок.

1. Мое начальное состояние для текста в моем хранилище никогда не инициализируется и всегда возвращает неопределенное значение
2. Компонент не повторно отображался при изменении состояния

---

function App(props) {
  useEffect(() => {
    console.log(props);
  }, [props]);
  return (
    <div className="App">
      <h1>{props.text && props.text}</h1>
      <button onClick={() => props.setText()}>change</button>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    text: state.text
  };
};

const mapDispatchToProps = dispatch => ({
  setText: () => dispatch(setCurrentText())
});

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

редуктор

const initial_state = {
  text: "hello"
};

export const textReducer = (state = initial_state, action) => {
  switch (action.type) {
    case "text-change":
      console.log("in here reducer", action);

      return { ...state, text: action.payload };
    default:
      return state;
  }
};

действие

export const setCurrentText = () => {
  return {
    type: "text-change",
    payload: "change now"
  };
};

Answer 1

import {textReducer} from './reducer';

function App(props) {
  useEffect(() => {
    console.log(props);
  }, [props]);
  return (
    <div className="App">
      <h1>{props.text && props.text}</h1>
      <button onClick={() => props.setText()}>change</button>
    </div>
  );
}

const mapStateToProps = state => {
  return {
    text: state.textReducer.text
  };
};

const mapDispatchToProps = dispatch => ({
  setText: () => dispatch(setCurrentText())
});

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