как перерисовать дочерний компонент React, если пропущен этот родительский проход (приставка)

Question

Я немного путаюсь с редуксом и реагирую ...

У меня есть родительский компонент (SingleList), который отображает дочерний компонент (NutrientsTable). Родительский переход к потомкам productList часть состояния, затем потомки в действии вызова componentDidMount, которые обновляют currentListNutrients , а затем я использую это в потомках render (), чтобы показать.

Я попытался объявить calcNutrients как вспомогательный метод в компоненте, а затем присвоить переменной и затем использовать ее в render (). В результате все работает нормально, но я собираюсь поместить все действия приложения в Action Creator, поэтому мне нужно сделать это с помощью redux.

Parent Comp SingleList

import { connect } from "react-redux";
import NutrientsTable from "../NutrientsTable";

class SingleList extends Component {

  render() {
    return (
      <div className="single-list">
        <NutrientsTable 
          productsList={this.props.list.productsList}
        />
      </div>
    );
  }
}

function mapStateToProps({ lists }, ownProps) {
  return {
    list: lists[ownProps.match.params.id]
  };
}

export default connect(
  mapStateToProps,
  {}
)(SingleList);

Детский комп Питательные веществаТаблица

import { connect } from 'react-redux';
import { calculateNutrients } from '../actions';

class NutrientsTable extends Component {

    componentDidMount() {
        this.props.calculateNutrients(this.props.productsList);
    }

    render() { 
        const { calories, carbohydrates, proteins, fats } = this.props.nutrients;

        return (
            <div>{calories} {carbohydrates} {proteins} {fats}</div>
        )
    }
}

const mapStateToProps = ({currentListNutrients}) => {
    return { nutrients: currentListNutrients }
}

export default connect(mapStateToProps, { calculateNutrients })(NutrientsTable);

Действие Рассчитать питательные вещества

export function calculateNutrients(productsList) {
  let calories = 0,
    carbohydrates = 0,
    proteins = 0,
    fats = 0;
  _.map(productsList, product => {
    product.calories && (calories += product.calories * product.count);
    product.carbohydrates && (carbohydrates += product.carbohydrates * product.count);
    product.proteins && (proteins += product.proteins * product.count);
    product.fats && (fats += product.fats * product.count);
  });

  return {
    type: CALCULATE_NUTRIENTS,
    payload: {calories, carbohydrates, proteins, fats}
  }
}

И Редуктор Просто верните action.payload

Все нормально при первом рендеринге, но когда я выполняю некоторые действия в родительском и изменяю элемент состояния productList , потомки не перерисовывают новый productList . Я знаю, это вызвало только один вызов componentDidMount. Но где я должен назвать действие? Я не могу решить это любым методом жизненного цикла. Любое предложение?

Answer 1

Во-первых, если вы используете Redux, вам не нужно передавать данные от родителя к потомкам, если данные существуют в хранилище Redux (состояние приложения). Просто используйте connect для дочерних компонентов. Дочерние компоненты должны обновляться при обнаружении любых изменений в хранилище Redux (состояние приложения).

Во-вторых, когда вы хотите, чтобы изменения произошли, вы должны dispatch и выполнить действие с Redux, которое скажет Redux вызвать api (или что-то в этом роде) и обновить свое хранилище.

Для обработки вызовов API вы должны использовать Redux-thunk или Redux-saga.