redux-immutable mapStateToProps 道具为空

Question

我正在更新我的第一个 react/redux 应用程序以使用 redux-immutable 并且无法弄清楚为什么 mapStateToProps 中的道具是空的。我看到 thunk 记录器输出中填充了属性，但它们在组件中为空。

components/Packages.jsx:

import React from 'react';
import pureRender from 'pure-render-decorator';
import {connect} from 'react-redux';
import PropTypes from 'prop-types';
import {loadPackages} from '../../actions/packageActions';
import PackageList from './PackageList';
import ImmutablePropTypes from 'react-immutable-proptypes';
import {Map,fromJS,List} from 'immutable';

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

Packages.propTypes = {
  results: ImmutablePropTypes.list.isRequired,
};

const mapStateToProps = (state, ownProps) => {
  return {
    packages: state.get('packages'),
    results: !state.getIn(['packages','results']) ? List() : state.getIn(['packages','results'])
  };
}

export const PackagesContainer = connect(mapStateToProps)(Packages);

actions/packageActions.jsx:

import * as types from './actionTypes';
import PackageApi from '../api/packageApi';

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

export function loadPackagesSuccess(packages) {
  return {
    type: types.LOAD_PACKAGES_SUCCESS,
    state: packages.data
  }
}

reducers/packageReducer.js:

import {Map,fromJS,List} from 'immutable';
import * as types from '../actions/actionTypes';
import initialState from './initialState';

export default function packageReducer(state = initialState, action) {
  switch (action.type) {
    case types.LOAD_PACKAGES_SUCCESS:
      return state.set('packages', fromJS(action.state));
    default:
      return state;
  }
}

reducers/initialState.js:

import {Map, List} from 'immutable';
import update from 'immutability-helper';

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

reducers/rootReducer.js:

import {combineReducers} from 'redux-immutable';
import packages from './packageReducer';
import login from './loginReducer';
import { reducer as form } from 'redux-form/immutable';

const reducer = combineReducers({
  packages,
  login,
  form
});

export default reducer;

store.js:

import {createStore, applyMiddleware} from 'redux';
import {createLogger} from 'redux-logger';
import reducer from './reducers/rootReducer';
import thunk from 'redux-thunk';
import initialState from './reducers/initialState';

const store = createStore(reducer, initialState, applyMiddleware(thunk, createLogger()));

export default store;

thunk log:

state:{
  results: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  type: "LOAD_PACKAGES_SUCCESS"
}

编辑

Redux DevTools 显示正确的数据结构，但 mapStateToProps 仍然返回空列表。

Redux 开发工具：

{
packages
packages{
  "totalCount": 145,
  "results": [
    {

Packages.jsx:

const mapStateToProps = (state, ownProps) => {
  return {
    packages: state.get('packages'),
    results: !state.getIn(['packages','packages','results']) ? List() : state.getIn(['packages','packages','results'])
  };
}

我更新了initialState，它解决了state.getIn(['packages','results']); 是undefined 的问题。但是，结果属性仍然会生成一个空列表。

Answer 1

我可以看到的问题是您在组件中执行 state.get 时没有传递组合减速器名称，即包。

传递包将减速器名称组合到 state.get 或 state.getIn 方法中，作为组件中的第一个参数。

要从 mapStateToProps 中的状态获取包，然后获取如下状态

  packages: state.get(“packages”,”packages”); //here first param is your packages combine reducer name

这也适用于 state.getIn。每当您组合减速器时，您必须将组合减速器名称作为第一个参数传递给 state.get 或 state.getIn。

我希望这能解决您的问题。

Answer 2

改变：

return state.set('packages', action.state);

到

return state.set('packages', fromJS(action.state));

在LOAD_PACKAGE_SUCCESS.