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