реагировать и редуцировать, обновлять состояние из изменений магазина в компоненте

Question

Я пытаюсь обновить свое состояние home component, получая данные из redux store каждый раз, когда обновляется магазин. Я не уверен, что не так с кодом ниже. Я не могу слушать изменения в моем домашнем компоненте.

моя функция отправки обрабатывается в этом классе.

export class GanttFilter extends Component {
...
    handleSubmit = () => {
        this.gFilter.filterGanttData(this.formValues)
            .then((result) => {
                if (result.data)
                    this.props.dispatch(ganttActions.loadGanttData(result.data));
            });
    }

...
GanttFilter.propTypes = {
    dispatch: PropTypes.func.IsRequired
};

function mapStateToProps(state) {
    return {
        ganttData: state.gantt.ganttData
    };
}


export default connect(mapStateToProps)(GanttFilter);

То, что я хотел бы делать при каждом вызове отправки и изменении данных, это обновить состояние в моем home component. Вот этот компонент.

export class Home extends Component {

    constructor() {
        super();

        this.state = {
            data: [],
            links: []
        };
    }

    render() {
          return (
              <div className="fill">
                  <Gantt data={this.state.data} links={this.state.links} />
          </div>
        );
    }
}

Home.propTypes = {
    data: PropTypes.IsRequired
};
function mapStateToProps(state) {
    return {
        data: state.gantt.ganttData
    };
}

export default connect(mapStateToProps)(Home);

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

Редактировать: вот компонент оболочки

function renderApp() {
  // This code starts up the React app when it runs in a browser. It sets up the routing
  // configuration and injects the app into a DOM element.
  const baseUrl = document.getElementsByTagName("base")[0].getAttribute("href");
    ReactDOM.render(
        <ReduxProvider store={store}>
            <AppContainer>
              <BrowserRouter children={routes} basename={baseUrl} />
            </AppContainer>
        </ReduxProvider>,
    document.getElementById("react-app")
  );
}

1018 * редукторы *

const actionTypes = require('../actions/actionTypes');


const gantt = {
    ganttData: [],
    selectedTask: null
};

export default function ganttReducer(state = gantt, action) {
    switch (action.type) {
        case actionTypes.loadGanttData:
            return { ...state, ganttData: [...action.ganttData] };
        default:
            return state;
    }
}

корневой редуктор

import { combineReducers } from 'redux';
import gantt from './ganttReducer';

const rootReducer = combineReducers({
    gantt
});

export default rootReducer;

1024 * действия *

const actionTypes = require('./actionTypes');

export function loadGanttData(ganttData) {
    return { type: actionTypes.loadGanttData, ganttData };
}

export function getSelectedTask(ganttTask) {
    return { type: actionTypes.setSelectedTask, ganttTask };
}

Ошибка:

Answer 1

Убедитесь, что вы импортируете свой Home компонент, используя import Home from '...', а не import { Home } from '...', иначе вы бы захватили неподключенный компонент.В целом, я бы также не экспортировал неподключенный компонент.

Answer 2

Изменить это:

render() {
      return (
          <div className="fill">
              <Gantt data={this.state.data} links={this.state.links} />
      </div>
    );
}

Для

render() {
      return (
          <div className="fill">
              <Gantt data={this.props.data} links={this.state.links} />
      </div>
    );
}

Ваши данные поступают из вашего реквизита (излишки), а не из вашего штата.