javascript - Redux 没有以我可以使用对象的方式将状态映射到 props

Question

这是我的索引(应用程序组件)文件:

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);

this.props.myValue 的控制台日志为:

This is the component App props: Map { "route": Map { "location": Map { "pathname": "/main", "search": "", "hash": "", "state": undefined, "key": "gftdcz" } }, "global": Map { "myValue": 0 }, "language": Map { "locale": "en" } }

如果我执行 this.props.myValue.global，我会得到未定义的结果。我需要访问和操作 myValue 值。

这是 reducer :

import { fromJS } from 'immutable';

// The initial state of the App
const initialState = fromJS({
  myValue: 0,
});

function appReducer(state = initialState, action) {
  console.log(`The reducer is being found and here is the state: ${state}`, ' and the action: ', action);
  switch (action.type) {
  case 'Name':
    return {
      myValue: action.payload,
    };
  default:
    return state;
  }
}

export default appReducer;

这是全局 reducer 文件...

/**
 * 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，所以这是一次有趣的体验。我希望有人能在这里为我指出正确的方向。

Answer 1

从 Redux 存储中选择值

当您想要选择一个特定值时，您正在将 this.props.myValue 设置为 Redux 存储的全部内容。

mapStateToProps 接收整个存储状态，而不仅仅是来自一个特定 reducer 的 block 。因此，您需要首先从您想要的特定 reducer 访问状态。因此，在 mapStateToProps 的许多示例中，第一行使用解构来获取相关的状态片段，如下所示:

const { global } = state;

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

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

所以你的mapStateToProps应该是这样的:

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

使用不可变 map

由于您的状态是不可变的映射，据我所知解构不起作用。因此，在您的 mapStateToProps 中，您必须执行以下操作:

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

变量命名

您的代码使用 reducer 名称 global 作为 reducer ，该 reducer 在其自己的代码文件中称为 appReducer。而且该 reducer 不是根 reducer ，因此它没有任何“全局”内容。术语“全局”在 redux 存储的上下文中实际上并没有任何意义 - 尽管术语“根”有任何意义。

如果您避免使用术语 global 来表示任何内容，并将根 reducer 中的 reducer 名称与定义 reducer 的文件的名称(或其代码文件中给出的名称)。因此，我建议在 combineReducers 调用中使用名称 app 而不是 global。更好的办法是将其命名为更有意义的名称，尽管我知道您正处于概念验证阶段。