Redux的mapStateToProps不在AngularJS和React之间映射道具

Question

Our project is mainly written in AngularJS 1.5, but we are transitioning over to ReactJS. We're using react2angular to allow our AngularJS project to consume React components. Our project is also using ngRedux to store certain data. While I'm able to save certain data using Angular, I am unable to access the Redux store data via the mapped props.

this.props.interval in CardController.js is undefined. I am able to get store data using this.props.store.getState() , but React is not able to detect if there has been a change in the Redux store in componentWillReceiveProps , so I don't think that's an option.

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

Turns out that the problem was that I forgot to drill down. Instead of state.interval , it should have been state.card.interval .