Reduzierstücke
import getInitialState, {
formDataInitialState as initialState,
} from '../helpers/initialState';
import { HANDLE_FIELD_DONE, ON_FIELD_CHANGE, RESET } from '../actionCreators';
export default (state = initialState, { type, payload }) => {
switch (type) {
case RESET: {
return getInitialState().formDataInitialState;
}
case ON_FIELD_CHANGE: {
const { name } = payload;
return {
...state,
[name]: '',
}
}
case HANDLE_FIELD_DONE: {
const { name, value } = payload;
return {
...state,
[name]: value,
}
}
}
return state;
};
Hier stört im Allgemeinen nur die Verwendung der SchalterkonstruktionSagas
import { all, put, select, fork, takeEvery } from 'redux-saga/effects';
import { runServerSideValidation } from '../actionCreators';
import { HANDLE_FIELD } from '../actionCreators';
function* takeHandleFieldAction() {
yield takeEvery(HANDLE_FIELD, function*({ payload }) {
const { validation, formData } = yield select(
({ validation, formData }) => ({
validation: validation[payload.name],
formData,
})
);
const valueFromState = formData[payload.name];
if (payload.value !== valueFromState) {
const { name, value } = payload;
const { validator } = validation.serverValidator;
yield put(
runServerSideValidation({
name,
value,
validator,
formData,
})
);
}
});
}
export default function* rootSaga() {
yield all([fork(takeHandleFieldAction())]);
}
In Sagen ist das größte Problem die Schwierigkeit des Lesens. Nur ein flüchtiger Blick, um zu verstehen, was die Saga schwierig macht. Ein Grund dafür ist die tiefe Verschachtelung. Sie können natürlich die Arbeiter herausnehmen, um die Tiefe zu verringern, aber dann erhöht sich die Redundanz.
import { all, put, select, fork, takeEvery } from 'redux-saga/effects';
import { runServerSideValidation } from '../actionCreators';
import { HANDLE_FIELD } from '../actionCreators';
function* takeHandleFieldWorker({ payload }) {
const { validation, formData } = yield select(
({ validation, formData }) => ({
validation: validation[payload.name],
formData,
})
);
const valueFromState = formData[payload.name];
if (payload.value !== valueFromState) {
const { name, value } = payload;
const { validator } = validation.serverValidator;
yield put(
runServerSideValidation({
name,
value,
validator,
formData,
})
);
}
}
function* takeHandleFieldWatcher() {
yield takeEvery(HANDLE_FIELD, takeHandleFieldWorker);
}
export default function* rootSaga() {
yield all([fork(takeHandleFieldWatcher())]);
}
Es gibt auch Überprüfungen, die entweder die Verschachtelung erhöhen oder Ausstiegspunkte aus der Saga hinzufügen, was unseren Code verschlechtert.