Question

我正在尝试通过每次商店更新时从home component获取数据来更新redux store状态。我不确定下面的代码有什么问题。我听不到我的`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

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

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

2 个答案: