Question

我试图用某种初始状态初始化一个reducer并将其连接到一个组件，但无法解析为什么我的状态在我的组件中总是为空。

我包括一个指向codesandbox.io的链接，该链接在化简器中注释了不同的排列。

https://codesandbox.io/s/boring-hypatia-dr9c1

经过修改以确保至少能正常工作的减速器（原始注释在项目中已注释掉）：

var abilityStats = {
  strength: 18,
  dexterity: 12,
  constitution: 12,
  intelligence: 12,
  wisdom: 12,
  charisma: 13
 };

const abilityStatsReducer = (state = abilityStats, action) => {
  var stats = {}
  if(abilityStats) {
    stats.strength = {
      score: stats.strength,
      mod: calculateAbilityMod(stats.strength)
    };
    stats.dexterity = {
      score: stats.dexterity,
      mod: calculateAbilityMod(stats.dexterity)
    };
    stats.constitution = {
      score: stats.constitution,
      mod: calculateAbilityMod(stats.constitution)
    };
   stats.intelligence = {
     score: stats.intelligence,
     mod: calculateAbilityMod(stats.intelligence)
   };
   stats.wisdom = {
     score: stats.wisdom,
     mod: calculateAbilityMod(stats.wisdom)
   };
   stats.charisma = {
     score: stats.charisma,
     mod: calculateAbilityMod(stats.charisma)
   };

    return stats
  }

  return state
};

减根剂：

const rootReducer = combineReducers({
  abilityStats: abilityStatsReducer()
});

export default rootReducer;

Index.js

ReactDOM.render(
  <Provider store={createStore(reducers)}>
    <App />
  </Provider>,
  document.getElementById("root")
);

组件我正在尝试访问以下状态：

import React, { Component } from "react";
import { connect } from "react-redux";

class AbilityStats extends Component {
  // constructor(props) {

  //   super(props);
  //   var strength = props.abilityStats
  //   debugger;

  // }

  state = this.props.abilityStats;

  render() {
    return (
      <div>
        <div>{this.state.strength.score}</div>
        <div>test</div>
      </div>
    );
  }
}

const mapStateToProps = state => {
  const { abilityStats } = state;
  return {
    ...abilityStats
  };
};

export default connect(mapStateToProps)(AbilityStats);

我收到错误消息

商店没有有效的减速器。确保传递给CombineReducers的参数是一个其值为减速器的对象。

和

TypeError：无法读取null的属性“ strength”

Answer 1

您在mapStateToProps中做错了，

const mapStateToProps = state => {
  return state;
};

在访问状态时，您也可以直接将其用作

{this.props.strength}

您在combineReducers中犯了一个错误，

const rootReducer = combineReducers({
  abilityStats: abilityStatsReducer // `()` not needed here
});

注意：由于您只有一个减速器，因此无需combineReducers就可以直接使用减速器，

您可以直接导出减速器，

export default abilityStatsReducer

Answer 2

您需要将函数传递给combineRedudcer而不是调用它。

const rootReducer = combineReducers({
  abilityStats: abilityStatsReducer()
});

应该是

const rootReducer = combineReducers({
  abilityStats: abilityStatsReducer
});

在您的mapStateToProps中，您需要返回abilityStats而不是对其进行销毁。

const mapStateToProps = state => {
  const { abilityStats } = state;
  return {
    abilityStats
  };
};

努力初始化初始状态并进行连接

2 个答案: