MapStateToProps Возвращает ноль в реагировать на реду - PullRequest
Новая
       5

MapStateToProps Возвращает ноль в реагировать на реду

0 голосов
/ 11 января 2019

Я пытаюсь выучить излишки. Я успешно реализовал mapDispatchedToProps. Но функция mapStateToProps возвращает Null. Мой код указан ниже.

MeatShopReducer 

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

Мое понимание: Я закомментировал строки в функции рендера, где мне нужно извлечь значение из состояния. Затем я отправил действие. console.log из действия показывает, что магазин обновлен. Исходя из этого, я пришел к выводу, что хранилище правильно подключено к MyShop.js, а также работает мой MapDispatchToAction.

Но когда я пытаюсь извлечь значение из этого состояния, оно дает мне ноль. Так что mapStateToProps не работает. Я не нахожу никаких ошибок в моем редукторе. Я также включил корпус по умолчанию в мой редуктор. Так что он не должен потерпеть неудачу на этапе инициализации.

Ответы [ 2 ]

0 голосов
/ 11 января 2019

При отображении вашего состояния на реквизиты (с помощью функции mapStateToProps) вы фактически предоставляете реквизиты для подключенного компонента. Вы не используете локальное состояние в вашем компоненте.

Таким образом, вы можете получить доступ к своим данным как: 

console.log(this.props.beef);
console.log(this.props.mutton);
console.log(this.props.chicken);
0 голосов
/ 11 января 2019

connect() - это HOC, который передает часть глобального состояния в ваш компонент через реквизит. Таким образом, локальное состояние вашего компонента не имеет никаких данных.

Таким образом, вместо вызова, например, this.state.beef, попробуйте this.props.beef. Должно работать нормально.

...