Я пытался заставить это работать весь день, но не смог найти решение из документации или других постов, так что, надеюсь, кто-нибудь сможет мне помочь.
У меня есть компонент 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);