减速器未更新组件的 state

Question

我一直试图让这个工作一整天，但无法从文档或其他帖子中找到解决方案，所以希望有人能够帮助我。

我有一个从另一个组件dashboard.中调用的组件transactions 。 当transaction加载时，它会触发一个动作，然后触发减速器。 我确认减速器具有我正在寻找的有效负载，但由于某种原因不会导致componentWillUpdate或componentWillReceiveProps在transactions组件中执行。 它确实会导致dashboard中的componentWillUpdate或componentWillReceiveProps运行，但是当我检查道具时，数据不存在。 我添加了一些可能有用的代码，但有人知道为什么我的减速器没有触发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);

=> transactionReducer.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);