validacion - validar formulario javascript html5

Reaccionar la acción de envío de Redux después de otra acción

Question

Tengo una acción asíncrona , que busca datos de la API REST:

export const list = (top, skip) => dispatch => {
dispatch({ type: ''LIST.REQUEST'' });
$.get(API_URL, { top: top, skip: skip })
.done((data, testStatus, jqXHR) => {
dispatch({ type: ''LIST.SUCCESS'', data: data });
});
};

Una acción de sincronización , que cambia el estado de skip :

export const setSkip = (skip) => {
return {
type: ''LIST.SET_SKIP'',
skip: skip
};
};

Estado inicial para top = 10, skip = 0 . En componente:

class List extends Component {
componentDidMount() {
this.list();
}
nextPage() {
let top = this.props.list.top;
let skip = this.props.list.skip;
// After this
this.props.onSetSkip(skip + top);
// Here skip has previous value of 0.
this.list();
// Here skip has new value of 10.
}
list() {
this.props.List(this.props.list.top, this.props.list.skip);
}
render () {
return (
<div>
<table> ... </table>
<button onClick={this.nextPage.bind(this)}>Next</button>
</div>
);
}
}

Cuando se hace clic en el botón Siguiente a la primera vez, el valor del skip que utiliza la acción asíncrona no cambia. ¿Cómo puedo enviar acciones después de la acción de sincronización ?

Answer 1

En lugar de enviar una acción después de una acción de sincronización, ¿puede llamar a la función desde el reductor?

Entonces sigue este flujo:

Llamada de acción de sincronización -> Llamada de reductor ---> Función de caja (reductor) ---> Función de caja (reductor)

En lugar del flujo habitual que probablemente sea esto para usted:

Llamada de acción de sincronización -> Llamada de reducción

Siga esta guía para dividir los reductores y ver qué reductores de caso son.

Si la acción que desea enviar tiene efectos secundarios, entonces la forma correcta es utilizar Thunks y luego puede enviar una acción después de una acción.

Ejemplo para Thunks :

export const setSkip = (skip) => {
return (dispatch, getState) => {
dispatch(someFunc());
//Do someFunc first then this action, use getState() for currentState if you want
return {
type: ''LIST.SET_SKIP'',
skip: skip
};
}
};

Answer 2

Gracias por las respuestas, pero lo hice de esta manera:

let top = this.props.list.top;
let skip = this.props.list.skip;
let newSkip = skip + top;
this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);

Primero calculo un nuevo skip y envío una acción asíncrona con este nuevo valor. Luego envío una acción syns, que actualiza el skip en estado.

Answer 3

Si está utilizando redux thunk , puede combinarlos fácilmente. Es un middleware que permite a los creadores de acciones devolver una función en lugar de una acción.

Su solución podría haber funcionado para usted ahora si no necesita encadenar a los creadores de acciones y solo necesita ejecutarlos a ambos.

this.props.onList(top, newSkip);
this.props.onSetSkip(newSkip);

Si necesita encadenamiento (llamarlos de manera sincrónica) o esperar de los datos de la primera acción despachada, esto es lo que recomendaría.

export function onList(data) {
return (dispatch) => {
dispatch(ONLIST_REQUEST());
return (AsyncAPICall)
.then((response) => {
dispatch(ONLIST_SUCCESS(response.data));
})
.catch((err) => {
console.log(err);
});
};
}
export function setSkip(data) {
return (dispatch) => {
dispatch(SETSKIP_REQUEST());
return (AsyncAPICall(data))
.then((response) => {
dispatch(SETSKIP_SUCCESS(response.data));
})
.catch((err) => {
console.log(err);
});
};
}
export function onListAndSetSkip(dataForOnList) {
return (dispatch) => {
dispatch(onList(dataForOnList)).then((dataAfterOnList) => {
dispatch(setSkip(dataAfterOnList));
});
};
}

Answer 4

dispatch ({type: ''LIST.SUCCESS'', data: data, skip: el valor que desea después de la acción de sincronización });

Answer 5

también mira esto, redux-sequence-action