React redux React/Redux/ImmutableJS get（）返回未定义的

在api调用之后，我试图通过将有效负载与初始状态Map合并来更新我的redux存储。我可以在MapStateTops中使用点表示法访问状态属性，但是当尝试调用state.get'prop'时，该值未定义

actions.js

reducer.js

Packages.jsx

编辑

reducer.js

Packages.jsx

PackageList.jsx

---

若结构状态错误，则减速器存在问题

替换这个：returnupdatestate，{$merge:action.packages}

使用以下命令：return state.set'packages'，Immutable.fromJsaction.packages

---

现在，您使用vanilla js immutable data Rotation helper，从中返回新的基本js对象/数组等，并且与immutable.js库无关，您尝试在裸js对象上使用immutable.js方法。

我明白了。我使用您建议的更改进行了更新，并且我能够使用get和getIn从state获取值。当我迭代结果时，能够呈现有效负载属性的唯一方法是调用item.get'prop'。这是迭代不可变结构的正确方法吗？另外，将state.getIn['packages'，'results']记录到控制台中不会打印属性值，它只是显示该值的不可变描述。@neridaj如果results是另一个不可变结构，那么它会打印它。您可以使用.toJS传输回js。要从不可变的js结构中获取值，必须使用.get或.getIn，是的。

export function loadPackages() {
  return function(dispatch) {
    return PackageApi.getAllPackages().then(packages => {
      dispatch(loadPackagesSuccess(packages));
    }).catch(error => {
      throw(error);
    });
  };
}

export function loadPackagesSuccess(packages) {
  return {
    type: 'LOAD_PACKAGES_SUCCESS',
    packages
  }
}

const reducer = (state = Map(), action) => {
  switch (action.type) {
    case 'LOAD_PACKAGES_SUCCESS':
      return update(state, {$merge: action.packages});
    default:
      return state;
  }
}

export default reducer;

const mapStateToProps = (state) => {
  console.log(state.results); // (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  return {
    state,
    packages: state.get('results') // undefined
  };
}

const initialState = Map({
  packages: {
    totalCount: null,
    results: List(),
    dir: null,
    totalPages: null,
    limit: null,
    sort: null,
    page: null
  }
});

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOAD_PACKAGES_SUCCESS':
      return state.set('packages', fromJS(action.packages));
    default:
      return state;
  }
}

export class Packages extends React.Component {
  componentDidMount() {
    this.props.dispatch(loadPackages(this.props.state));
  }
  render() {
    return (
      <div className="col-lg-12">
        {this.props.results ?
        <PackageList allPackages={this.props.results} /> :
        <h3>No Packages Available</h3>}
      </div>
    );
  }
};

const mapStateToProps = (state) => {
  console.log(state.getIn(['packages','results'])); 
  /* Doesn't print the actual value of results but shows the 
     immutable structure: List {size: 10, _origin: 0, _capacity: 10, 
     _level: 5, _root: null, …} */
  return {
    packages: state.get('packages'),
    results: state.getIn(['packages','results'])
  };
}

const PackageList = ({allPackages}) => {
  const packageItems = allPackages.map(pkg =>
    <li key={pkg.get('id')}>{pkg.get('packageName')}</li>
  );
  return (
    <ul className="packages">
      {packageItems}
    </ul>
  );
};