Redux的mapStateToProps不在AngularJS和React

Question

我们的项目主要是用AngularJS 1.5编写的，但我们正在转换到ReactJS。我们正在使用react2angular来允许我们的AngularJS项目使用React组件。我们的项目还使用ngRedux来存储某些数据。虽然我能够使用Angular保存某些数据，但我无法通过映射的道具访问Redux商店数据。

this.props.interval中的

CardController.js未定义。我可以使用this.props.store.getState()获取商店数据，但是React无法检测componentWillReceiveProps中Redux商店是否发生了变化，所以我不认为这样做了。是一个选择。

CardContainer.js

import { connect } from 'react-redux';
import CardController from './CardController';

const mapStateToProps = (state) => {
  return {
    interval: state.interval
  };
};

const mapDispatchToProps = null;

const ScorecardContainer = connect(
  mapStateToProps,
  mapDispatchToProps,
)(CardController);

export default CardContainer;

CardController.js

import React from 'react';
import PropTypes from 'prop-types';
import Card from './Card';

export default class CardController extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selected: this.props.interval,
      state: this.props.$scope.filterParams,
    };
  }

  render() {
    return (
      <div className="CardController">
        <Card
          selected={this.state.selected}
        />
      </div>
    );
  }
}

CardController.propTypes = {
  interval: PropTypes.string,
};

reducers.js

import * as actionTypes from './actionTypes';

const initialState = {
  interval : 'week'
};

export const setInterval = (state, action) => {
  return {
    ...state,
    interval : action.interval
  };
};

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.SET_INTERVAL :
      return setInterval(state, action);
    default :
      return state;
  }
};

export default reducer;

Answer 1

原来问题是我忘了向下钻。而不是state.interval，它应该是state.card.interval。