Javascript MapStateTops在react redux中返回Null

我正在努力学习redux。我已成功实施mapDispatchedToProps。但是MapStateTops函数返回Null。我的代码如下

肉店减量器

const initial_state = {
  beefs: 20,
  muttons: 30,
  chickens: 40
};

const MeatShopReducer = (state = initial_state, action) => {
  switch (action.type) {
    case "ADD_BEEF":
      console.log("action dispatched");
      var new_state = { ...state };
      new_state.beefs = new_state.beefs - 1;
      console.log(new_state);
      //return new_state;
      return new_state;

    default:
      console.log("default:");
      console.log(state);
      return state;
  }
};

export default MeatShopReducer;

MeatShop.js

import React, { Component } from "react";
import { connect } from "react-redux";
class MeatShop extends Component {
  render() {
    console.log("render fired");
    console.log(this.state);
    return (
      <div>
        <div>Meat Shop Redux</div>
        <table>
          <thead>
            <tr>
              <th>Item</th>
              <th>Unit</th>
              <th>Price</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Beef</td>
              <td>{this.state.beef}</td>
              <td>{this.state.beef}</td>
              <td>
                <button onClick={this.props.ADD_BEEF}>Add</button>
              </td>
            </tr>
            <tr>
              <td>Mutton</td>
              <td>{this.state.mutton}</td>
              <td>{this.state.mutton}</td>
              <td>
                <button>Add</button>
              </td>
            </tr>
            <tr>
              <td>Chicken</td>
              <td>{this.state.chicken}</td>
              <td>{this.state.chicken}</td>
              <td>
                <button>Add</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    );
  }
}
const mapDispatchToProps = dispatch => {
  return {
    ADD_BEEF: () => dispatch({ type: "ADD_BEEF" })
  };
};

const mapStateToProps = state => {
  return {
    beef: state.beefs,
    mutton: state.muttons,
    chicken: state.chickens
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MeatShop);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
类MeatShop扩展组件{
render（）{
console.log（“渲染已激发”）；
console.log（this.state）；
返回(
肉店
项目
单位
价格
行动
牛肉
{这个州，牛肉}
{这个州，牛肉}
添加
羊肉
{this.state.mutton}
{this.state.mutton}
添加
鸡
{这个.州.鸡}
{这个.州.鸡}
添加
);
}
}
const mapDispatchToProps=调度=>{
返回{
添加牛肉：（）=>分派（{type:“添加牛肉”}）
};
};
常量mapStateToProps=状态=>{
返回{
牛肉：国家牛肉，
羊肉：国家，羊肉，
鸡：州。鸡
};
};
导出默认连接(
MapStateTops，
mapDispatchToProps
)（肉店）；

到目前为止，我的理解是： 我注释掉了render函数中需要从状态中提取值的行。然后我发出了行动。该操作中的console.log显示存储已更新。由此，我决定存储已正确连接到MyShop.js，并且我的MapDispatchToAction也正常工作

但当我试图从这个.state中提取值时，它会给我null。所以MapStateTops不起作用。我没有发现我的减速机有任何错误。我还在我的减速机中包括了一个默认情况。因此，我想它应该不会在初始化阶段失败。

connect（）

是一个HOC，它通过props将一段全局状态传递到组件中。因此，组件的本地状态没有任何数据

因此，不要调用，例如，

this.state.beef

尝试

this.props.beef

。它应该可以正常工作。

connect（）

是一个HOC，它通过props将一段全局状态传递到组件中。因此，组件的本地状态没有任何数据

---

因此，不要调用，例如，

this.state.beef

尝试

this.props.beef

。它应该可以正常工作。

将状态映射到道具时（通过

mapstatetops

函数），实际上是在为连接的组件提供道具。在组件中不使用本地状态

因此，您可以通过以下方式访问您的数据：

console.log(this.props.beef);
console.log(this.props.mutton);
console.log(this.props.chicken);

---

将状态映射到道具时（通过

mapstatetops

函数），实际上是为连接的组件提供道具。在组件中不使用本地状态

因此，您可以通过以下方式访问您的数据：

console.log(this.props.beef);
console.log(this.props.mutton);
console.log(this.props.chicken);

---

（旁注）您可以使用

var new_state={…state，beefs:state.beefs-1}以避免变异。@jcal..谢谢你的建议。。你能给我一些很好的学习资料来更新商店，同时避免变异吗。由于我是新来的，我发现很难理解redux。这个完全没有变异的东西来自函数式编程范式（fp）。在javascript中搜索有关fp的文章。这可以提高您对此的理解。（旁注）您可以使用
var new_state={…state，beefs:state.beefs-1}以避免变异。@jcal..谢谢你的建议。。你能给我一些很好的学习资料来更新商店，同时避免变异吗。由于我是新来的，我发现很难理解redux。这个完全没有变异的东西来自函数式编程范式（fp）。在javascript中搜索有关fp的文章。这可以提高你对这件事的理解谢谢你。。这很有魅力。。。我在youtube上观看视频教程。。那家伙忘了给我看这个派对谢谢。。这很有魅力。。。我在youtube上观看视频教程。。那家伙只是忘了展示这部分