Question

我遇到类似于此处讨论的问题：https://github.com/reactjs/react-redux/issues/291

我的问题是我有一个父组件，它根据我的redux商店中的状态值呈现一个子元素，它基本上是从我的数据库中检索的事务列表。父组件将这些事务传递给子组件。子组件（弹出窗口）使用调度的操作更新数据库。当我在更新数据库后关闭弹出窗口时，我再调用另一个操作从数据库中再次获取事务，以便我可以使用新数据重新呈现父项。

我的问题是保存后获取交易的操作似乎不会更新我的商店中的状态，直到我离开页面并返回。我的假设是，我父母的重新提取应该提取新的状态。

我应该如何处理这样的事情？

下面是一些示例代码。当我的弹出窗口更新我的数据后输入handleRefresh时，我希望重新呈现父组件，并让MonthView显示更新的数据。但是，直到我通过导航到任何其他页面并返回来离开页面时才会发生这种情况。

父组件

import React from 'react';
import MonthView from './MonthView.js';
import { connect } from 'react-redux';
import { getTransactions } from '../actions/actions.js';

  componentDidMount() {

    this.props.getTransactions(2016);

  }

 handleRefresh() {

    //call the action to update transactions state in my redux store
    this.props.getTransactions(2016);

    this.setState({ refreshView: true}, function () {});
  }

 render() {
    return (
  <div className="row">
    <div className="col-md-12">
        <MonthView 
          transactions={this.props.storeTransactions.transactions} 
          selectedYear={this.props.storeTransactions.selectedYear} 
          onAddYear={this.handleAddYear} 
          onSubtractYear={this.handleSubtractYear} 
          onHandleGetDetail={this.handleGetDetail} 
        />
    </div>
    <div>
        <TransactionsPopupContainer 
            modalActive={this.state.detailPopup} 
            transactions={this.props.storePopupTransactions ? this.props.storePopupTransactions.popuptransactions : [] }
            selectedYear={this.props.storeTransactions.selectedYear} 
            category={this.popupCategory} 
            month={this.popupMonth}
            onRefresh={this.handleRefresh}
        />
    </div>
  </div>
    )

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

export default connect(mapStateToProps, {getTransactions})(MonthViewContainer);

MonthViewContainer

import React from 'react';
import { connect } from 'react-redux';

import TransactionsPopupView from './TransactionsPopupView.js';
import { getPopupTransactions } from '../actions/actions.js';
import { saveTransactions } from '../actions/actions.js';

handleSave() {
    this.props.saveTransactions(this.editedTrans);
    this.props.onRefresh();
}

render() {

 if (this.props.transactions) {
            this.editedTrans = JSON.parse(JSON.stringify( this.props.transactions));
        } 

        return (
            <TransactionsPopupView 
                transactions={this.props.transactions}
                modalActive={this.props.modalActive} 
                onCategoryChange={this.handleCategoryChange}
                onNotesChange={this.handleNotesChange}
                savePopup={this.handleSave}
                handleRefreshParent={this.props.onRefresh}
            />
        );
}

const mapStateToProps = (state) => {
    return {storePopupTransactions: state.storePopupTransactions,
    }
};


export default connect(mapStateToProps, {getPopupTransactions,saveTransactions})(TransactionsPopupContainer);

操作

import axios from 'axios';

export const GET_TRANSACTIONS = 'GET_TRANSACTIONS';

export function getTransactions(year) {

  console.log("gettransactions action entered");

 return function(dispatch) {
  axios.get(`http://localhost:3001/api/transfilter?year=${year}&grouping=2`)
   .then(response => {
     console.log("response data in the gettransactions reducer: ", response.data);
     dispatch({
       type: GET_TRANSACTIONS,
       payload: response.data,
       selectedYear: year
     });
   })
   .catch((error) => {
   })
 }
}


export const SAVE_TRANSACTIONS = 'SAVE_TRANSACTIONS';

export function saveTransactions(transUpdate) {
  return function(dispatch) {
    axios.post('http://localhost:3001/api/updateTransactions', transUpdate)
   .then(response => {
     dispatch({
       type: SAVE_TRANSACTIONS,
       payload: response.data,
     });
   })
   .catch((error) => {
   })
  }
}

减速

import { combineReducers } from 'redux'

import {GET_TRANSACTIONS } from '../actions/actions.js'
import {SAVE_TRANSACTIONS } from '../actions/actions.js'

const INITIAL_STATE = { 
  defaultYear: 2018, 
  transactions: [], 
  searchMode: false
};

function get_transactions(state = INITIAL_STATE, action) {
  console.log("this is in the reducer: get_transactions");
  switch(action.type) {
    case GET_TRANSACTIONS:
      return Object.assign({}, state, {
        transactions: action.payload,
        selectedYear: action.selectedYear
      })
    default:
      return state;
  }
}


const SAVE_TRANSACTIONS_INITIAL_STATE = { saveResult: []}

function save_transactions(state = SAVE_TRANSACTIONS_INITIAL_STATE,action) {

  switch(action.type) {
    case SAVE_TRANSACTIONS:
      return Object.assign({}, state, {
        saveResult: action.payload
      })
    default:
      return state;
  }
}

const SAVE_TRANSACTIONS_INITIAL_STATE = { saveResult: []}

function save_transactions(state = SAVE_TRANSACTIONS_INITIAL_STATE,action) {

  switch(action.type) {
    case SAVE_TRANSACTIONS:
      return Object.assign({}, state, {
        saveResult: action.payload
      })
    default:
      return state;
  }
}

更新数据库后，React Redux捕获更新的存储状态

0 个答案: