redux-不变的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 DevTools：

{
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

更改：

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

至

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

在LOAD_PACKAGE_SUCCESS中。

Answer 2

我可以看到的问题是，您没有在组件中执行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 orstate.getIn的第一个参数传递。

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