I am a react newbie and trying to use selectors in my redux-form app. Here is a simplified sample(the original form contains tens of calculations and fields). It takes sums 2 amounts from the form and returns it:
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
);
When I run my Form it does not call the 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;
How can I make sure it is called?
Your sumAmounts
is not a selector, you are invoking it using 2 parameters (sumAmounts(amount1, amount2)
) but it only has one parameter state
.
In your mapstatetoprops
you are already extracting the state props you need to calculate the sum, namely amount1
and amount2
so why not calculating the sum there instead of going through other selectors?
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 };