Question

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

组件/ Packages.jsx

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool

动作/ packageActions.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);

减速器/ packageReducer.js

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
  }
}

减速器/ initialState.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;
  }
}

减速器/ rootReducer.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;

store.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;

thunk log

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;

修改

redux dev工具显示正确的数据结构，但mapStateToProps仍返回空List。

// redux dev tools

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

// Packages.jsx

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

我更新了initialState，修复了state.getIn（['packages'，'results']）的问题;未定义。但是，结果属性仍会导致列表为空。

Answer 1

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

传递包将reducer名称与state.get或state.getIn方法结合起来作为组件中的第一个参数。

要从mapStateToProps中获取状态包，请获取如下所示的状态

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

这也适用于state.getIn。每当你组合你的reducer时，你必须将组合的reducer名称作为第一个参数传递给state.get orstate.getIn。

我希望这可以解决您的问题。

Answer 2

更改了return state.set（'packages'，action.state）;返回state.set（'packages'， fromJS（action.state））;在LOAD_PACKAGE_SUCCESS。

redux-immutable mapStateToProps道具为空

2 个答案: