Redutores
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;
};
Aqui, em geral, apenas a construção do switch é irritanteSagas
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())]);
}
Nas sagas, o maior problema é a dificuldade de ler. Apenas um olhar superficial para entender o que torna a saga difícil. Uma razão para isso é o aninhamento profundo. Obviamente, você pode retirar os trabalhadores para reduzir a profundidade, mas a redundância aumenta.
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())]);
}
Também existem verificações que aumentam o aninhamento ou adicionam pontos de saída da saga, o que piora o nosso código.