反应和还原，从组件中的存储更改更新状态

Question

我试图通过每次存储更新时从redux store获取数据来更新home component状态。 我不确定下面的代码有什么问题。 我听不到我的`home组件中存储的更改。

我的调度功能在此类中处理。

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函数。 如何从home组件监听商店的更改并更新状态？

编辑：这是包装器组件

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")
  );
}

减速器

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;

行动

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

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

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

错误：

Answer 1

更改此：

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>
    );
}

您的数据来自道具（redux），而不是您的州。

Answer 2

确保使用import Home from '...'来import Home from '...' Home组件，而不是import Home from '...' import { Home } from '...'来import { Home } from '...'组件，否则您将抓住未连接的组件。 通常，我也将避免导出未连接的组件。