Как заставить селектор работать в приложении в формате Redux? - PullRequest
Новая
       17

Как заставить селектор работать в приложении в формате Redux?

0 голосов
/ 20 апреля 2019

Я новичок в реакции и пытаюсь использовать селекторы в своем приложении в форме редукса.Вот упрощенный образец (оригинальная форма содержит десятки вычислений и полей).Он берет 2 суммы из формы и возвращает ее: 

import { createSelector } from "reselect";
import { sum } from "../calculations";

const sumAmounts = state =>{
    debugger
    if (!state) return;

    if (!state.amount1 || !state.amount2)
  return  sum(state.amount1,state.amount2);
};
export default createSelector(
    sumAmounts
);

Когда я запускаю мою форму, она не вызывает sumAmounts: 

import React from "react";
import { Field, reduxForm, formValueSelector } from "redux-form";
import { connect } from "react-redux";
import sumAmounts from "../selectors/sumSelector";

export class FormContainer extends React.Component {
  render() {
    return (
      <form>
        <Field
          name="amount1"
          type="number"
          component="input"
          label="Amount 1"
        />
        <Field
          name="amount2"
          type="number"
          component="input"
          label="Amount 1"
        />
        <Field
          name="amount3"
          type="number"
          component="input"
          label="Amount 3"
        />
        <Field
          name="amount4"
          type="number"
          component="input"
          label="Amount 4"
        />
        <Field
          name="amount4"
          type="number"
          component="label"
          label={this.props.sum}
        />
      </form>
    );
  }
}

FormContainer = reduxForm({
  form: "myForm" // a unique identifier for this form
})(FormContainer);

const selector = formValueSelector("myForm");

FormContainer = connect(state => {
  const amount1 = selector(state, "amount1");
  const amount2 = selector(state, "amount2");
  const sum = sumAmounts(amount1, amount2);
  return { amount1, amount2, sum };
})(FormContainer);

export default FormContainer;

Как я могу убедиться, что она вызывается

1 Ответ

1 голос
/ 20 апреля 2019

Ваш sumAmounts не является селектором, вы вызываете его, используя 2 параметра (sumAmounts(amount1, amount2)), но он имеет только один параметр state.

В вашем mapstatetoprops вы уже извлекаете реквизиты состояния, необходимые для вычисления суммы, а именно amount1 и amount2, так почему бы не вычислить сумму вместо того, чтобы проходить через другие селекторы? 

  const amount1 = selector(state, "amount1");
  const amount2 = selector(state, "amount2");
  const sum = +amount1 + +amount2;
  console.log("map state to props " , amount1, amount2, sum);
  return { amount1, amount2, sum };
...