Javascript Redux没有以我可以使用对象的方式将状态映射到道具

这是我的索引应用程序组件文件：

const mapStateToProps = (state, ownProps = {}) => {
  console.log('this is from statetoprops: ', state); // state
  console.log('from state to props, own Props: ', ownProps); // undefined
  return {
    myValue: state,
  };
};

const AppWrapper = styled.div`
  max-width: calc(768px + 16px * 2);
  margin: 0 auto;
  margin-top: 64px;
  display: flex;
  min-height: 100%;
  padding: 0 16px;
  flex-direction: column;
`;

class App extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <AppWrapper>
          <Switch>
            <Route exact path="/main/" component={HomePage} />
            <Route path="/main/aboutme" component={AboutMe} />
            <Route path="/main/models" component={Models} />
            <Route path="/main/landscapes" component={Landscapes} />
          </Switch>
        </AppWrapper>
        {console.log(`This is the component App props: ${this.props.myValue}`)}
        <Footer />
      </div>
    );
  }
}


export default connect(mapStateToProps)(App);

这是全局减速器文件

/**
 * Combine all reducers in this file and export the combined reducers.
 */

import { fromJS } from 'immutable';
import { combineReducers } from 'redux-immutable';
import { LOCATION_CHANGE } from 'react-router-redux';

import globalReducer from 'containers/App/reducer';
import languageProviderReducer from 'containers/LanguageProvider/reducer';

/*
 * routeReducer
 *
 * The reducer merges route location changes into our immutable state.
 * The change is necessitated by moving to react-router-redux@5
 *
 */

// Initial routing state
const routeInitialState = fromJS({
  location: null,
});

/**
 * Merge route into the global application state
 */
function routeReducer(state = routeInitialState, action) {
  switch (action.type) {
    /* istanbul ignore next */
    case LOCATION_CHANGE:
      return state.merge({
        location: action.payload,
      });
    default:
      return state;
  }
}

/**
 * Creates the main reducer with the dynamically injected ones
 */
export default function createReducer(injectedReducers) {
  return combineReducers({
    route: routeReducer,
    global: globalReducer,
    language: languageProviderReducer,
    ...injectedReducers,
  });
}

---

我正在使用react/redux样板，同时我正在尝试学习redux，所以这是一个有趣的体验。我希望有人能在这里为我指出正确的方向。

不运行代码就很难准确地知道代码出了什么问题，但有几点我很清楚：

当您使用console.logthis.props.myValue时，您会得到一个看起来像JavaScript对象的对象。 您无法输入该对象，您将无法定义。 我的第一直觉是，您的action.payload不是一个普通的JavaScript对象，而是一个字符串或其他类型的对象

测试这一点的一种快速方法是console.logthis.props.myValue.constructor。

从Redux存储中选择值 您正在将this.props.myValue设置为Redux存储区的全部内容，但看起来您需要选择一个特定值

mapStateToProps接收整个存储状态，而不仅仅是来自一个特定缩减器的块。因此，您需要首先从所需的特定减速器访问状态。因此，在许多mapStateToProps示例中，第一行使用destructuring来获取状态块的相关信息，如下所示：

const { global } = state;

const mapStateToProps = (rootState) => { // renamed from state to rootState - this does not change the behavior, just more accurately describes what will be passed in
  const { global } = rootState;
  return {
    myValue: global.myValue,
  };
};

注意-这会给您一个名为global的变量，这对任何阅读您的代码的人来说都是非常混乱的。在JS中，全局上下文是一个常用的术语；虽然这可能不会破坏任何东西，但它不利于可读性。有关变量名的建议，请参见下文

从根状态的子集中，您只需要myValue属性

因此，您的mapStateToProps应该如下所示：

const { global } = state;

const mapStateToProps = (rootState) => { // renamed from state to rootState - this does not change the behavior, just more accurately describes what will be passed in
  const { global } = rootState;
  return {
    myValue: global.myValue,
  };
};

这也可以更简洁地写为

const mapStateToProps = (rootState) => ({ myValue: rootState.global.myValue});

使用不可变映射 因为你的状态是一个不变的映射，据我所知，解构是行不通的。因此，在MapStateTrops中，您必须执行以下操作：

const global = rooState.get('global');
const myValue = global.get('myValue');

变量命名 您的代码使用减速机名称global作为减速机，减速机在其自己的代码文件中称为appReducer。这个减速机不是根减速机，所以它没有全局性。在redux应用商店的上下文中，术语“全局”实际上并不意味着任何东西——尽管术语“根”确实如此

---

如果您避免将术语“全局”用于任何内容，并将根减速器中的减速器名称与在其中定义减速器的文件名或在其代码文件中给出的名称相匹配，这将有助于减少阅读您的代码的其他人的困惑，也可能有助于您自己。因此，我建议在您的combineReducers通话中使用name应用程序而不是global。更好的做法是将其命名为更有意义的名称，尽管我知道您在这里正处于概念验证阶段。

此时您尝试调用this.props.myValue.global。您是否正在连接您的应用程序组件？