Question

我对React非常陌生，并尝试编写一个应用程序，将一个投资组合输出到页面的一部分，并根据用户与该投资组合的交互，在DOM中的其他位置以灯箱/模式显示一些信息。 / p>

这要求我的两个渲染组件具有某种共享状态，我的理解是实现这一点的最好（或最好的）方法是使用Redux。然而，作为React的新手，现在将Redux添加到混音中，我有点超出了我的深度。

我已经创建了一些（现在非常愚蠢）动作创建器和缩减器，我最初尝试做的就是获取一些JSON并将其添加到我的商店。但是，我无法从我的组件中访问调度，我不确定我哪里出错了。

如果我在我的组件中控制了.log.logs，我得到一个空对象，“{}”。

以下是主要部分，任何指针都会非常感激：

App.js：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import store from './redux/store';
import { Portfolio } from './redux/components/portfolio';

ReactDOM.render(
  <Provider store={store}>
    <Portfolio />
  </Provider>,
  document.getElementById('portfolioCollection')
);

操作/ actionCreators.js：

export const populatePortfolio = obj => ({
  type: POPULATE_PORTFOLIO, 
  obj
});

export const populateLightbox = obj => ({
  type: POPULATE_LIGHTBOX, 
  obj
});

portfolio.js：

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';

export class Portfolio extends React.Component {

    componentDidMount() {
        this.getPortfolioData();
    }

    getPortfolioData() {
        fetch('/data.json')
        .then( (response) => {
            return response.json()
        })
        .then( (json) => {
            // dispatch action to update portfolio here
        });
    }

  render() {
    return(
      // render component
    );
  }
}

function mapStateToProps(state){
  console.log('state', state);
  return {
    state: state
  }
};

function mapDispatchToProps(dispatch) {
  console.log('dispatch', dispatch);
  return {
    actions: bindActionCreators({ populatePortfolio: populatePortfolio }, dispatch)
  };
}

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

Answer 1

this.props是空的，因为你没有传递任何道具。您正在使用未连接的组件，而不是已连接到redux的组件。

要解决此问题，请替换此行：

import { Portfolio } from './redux/components/portfolio';

带

import Portfolio from './redux/components/portfolio';

您正在导出已连接和未连接的组件。您可能只想要最后一次导出。由于连接的组件导出为default，因此无需使用{}解构即可将其导入。

除非您需要在测试中导入未连接的组件或类似内容，否则您可以从此行中删除export语句，因为导出您不打算导入的内容是没有意义的在另一个文件中。

export class Portfolio extends React.Component {

Answer 2

您无意在组件中手动调用dispatch。动作创建者功能会自动绑定为您分派。只需在您的组件中调用this.props.populatePortfolio()即可。

调度不适用于this.props

2 个答案: