反應和還原，從組件中的存儲更改更新狀態

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 '...'組件，否則您將抓住未連接的組件。 通常，我也將避免導出未連接的組件。