Редуктор не обновляет состояние компонента - PullRequest
0 голосов
/ 09 апреля 2020

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

У меня есть компонент transactions, который я вызываю из другого компонента dashboard. Когда transaction загружается, он запускает действие, которое затем запускает редуктор. Я подтвердил, что редуктор имеет полезную нагрузку, которую я ищу, но по какой-то причине не вызывает выполнение componentWillUpdate или componentWillReceiveProps в компоненте transactions. Это вызывает запуск componentWillUpdate или componentWillReceiveProps в dashboard, но когда я проверяю реквизиты, данных там нет. Я добавил некоторый код, который может быть полезен, но кто-нибудь имеет представление о том, почему мой редуктор не вызывает какие-либо методы обновления жизненного цикла в компоненте transactions? Спасибо за помощь!

=> Транзакции. js

import React, { Component } from "react";
import PropTypes from "prop-types";

import { connect } from "react-redux";
import {
  getTransactionsFromMongo
} from "../../actions/transactionAction";

class Transactions extends Component {
  constructor(props) {
    super(props);
    this.state = {
      transactions: []
    };
  }
  componentDidMount() {
    console.log(this.props);
    this.props.getTransactionsFromMongo();
  }

  render() {
    return <p>Hello world</p>;
  }
}

Transactions.propTypes = {
  getTransactionsFromMongo: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
  transactions: state.transactions
});

export default connect(
  mapStateToProps,
  { getTransactionsFromMongo }
)(Transactions);

= >actionReducer. js

import { GET_MONGO_TRANSACTIONS, UPDATE_TRANSACTION } from "../actions/types";

const initialState = {
  transactions: "",
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_MONGO_TRANSACTIONS:
      console.log("in get reducer");
      var tmp = JSON.stringify(action.payload);
      console.log(typeof(tmp));
      return {
        ...state,
        transactions: tmp
      };
    default:
      return state;
  }
}

=> Панель инструментов. js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { getAccounts, addAccount } from "../../actions/accountActions";

import Accounts from "./Accounts";
import Transactions from "./Transactions";

class Dashboard extends Component {
  componentDidMount() {
    this.props.getAccounts();
  }


  render() {

    dashboardContent = (<Transactions>Hello</Transactions>);

    return <div className="container">{dashboardContent}</div>;
  }
}

Dashboard.propTypes = {
  logoutUser: PropTypes.func.isRequired,
  getAccounts: PropTypes.func.isRequired,
  addAccount: PropTypes.func.isRequired,

};

const mapStateToProps = state => ({
  auth: state.auth,
  transactions: state.transactions
});

export default connect(
  mapStateToProps,
  { logoutUser, getAccounts, addAccount }
)(Dashboard);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...