React Redux dispatch действие после другого действия

у меня есть асинхронные действие, которое извлекает данные из REST API:

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 });
        });
};

A синхронизация действие, которое изменяет skip состояние:

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

начальное состояние для top = 10, skip = 0. В компоненте:

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>
        );
    }
}

при нажатии кнопки далее при первом нажатии, значение skip который использует асинхронное действие не изменилось. Как я могу отправить действие после синхронизация действий?

8
action dispatch javascript reactjs redux

5 ответов

Если вы используете redux thunk, вы можете легко объединить их. Это промежуточное ПО, которое позволяет создателям действий возвращать функцию вместо действия.

ваше решение могло бы сработать для вас сейчас, если вам не нужно связывать создателей действий и нужно только запустить их обоих.

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

Если вам нужна цепочка (вызов их синхронно) или ожидание от данных первого отправленного действия, это то, что я бы рекомендовал.

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));
     });
  };
}
3

вместо отправки действия после действия синхронизации вы можете просто вызвать функцию из редуктора?

получается этот поток:

вызов действия синхронизации -- > вызов редуктора - - - > функция случая (редуктор) ---> функция случая (редуктор)

вместо обычного потока, который, вероятно, это для вас:

вызов действия синхронизации -- > вызов редуктора

следуйте этому руководству, чтобы разделить редукторы вверх!--17--> чтобы увидеть, какие редукторы case.

Если действие, которое вы хотите отправить, имеет побочные эффекты, хотя тогда правильный способ-использовать Thunks, а затем вы можете отправить действие после действия.

пример 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
        };
    }
};
2

Спасибо за ответы, но я сделал это так:

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);

сначала я вычисляю новый skip и отправьте асинхронное действие с этим новым значением. Затем я отправляю действие syns, которое обновляет skip в государстве.

0
0

отправка ({ type: 'LIST.SUCCESS', data: data, skip:значение, которое вы хотите после синхронизации действий});

-1