Как предупредить реагирующую составляющую, когда на Redx Saga положено успешное действие? - PullRequest
Новая
       14

Как предупредить реагирующую составляющую, когда на Redx Saga положено успешное действие?

0 голосов
/ 11 октября 2018

Я использую шаблон действий с избыточностью (REQUEST, SUCCESS, FAILURE) вместе с сагой о избыточности.Я сделал сагу о наблюдателе и работнике так: 

import axios from 'axios';
import { put, call, takeEvery } from 'redux-saga/effects';
import * as actionTypes from 'constants/actionTypes';
import * as actions from 'actions/candidates';
const { REQUEST } = actionTypes;

// each entity defines 3 creators { request, success, failure }
const { fetchCandidatesActionCreators, addCandidateActionCreators } = actions;

const getList = () => axios.get('/api/v1/candidate/');

// Watcher saga that spawns new tasks
function* watchRequestCandidates() {
  yield takeEvery(actionTypes.CANDIDATES[REQUEST], fetchCandidatesAsync);
}

// Worker saga that performs the task
function* fetchCandidatesAsync() {
  try {
    const { data } = yield call(getList);
    yield put(fetchCandidatesActionCreators.success(data.data));
  } catch (error) {
    yield put(fetchCandidatesActionCreators.failure(error));
  }
}


const postCandidate = params => axios.post('/api/v1/candidate/', params).then(response => response.data).catch(error => { throw error.response || error.request || error; });

// Watcher saga that spawns new tasks
function* watchAddCandidate() {
  yield takeEvery(actionTypes.ADD_CANDIDATE[REQUEST], AddCandidateAsync);
}

// Worker saga that performs the task
function* AddCandidateAsync({ payload }) {
  try {
    const result = yield call(postCandidate, payload);
    yield put(addCandidateActionCreators.success(result.data));
  } catch (error) {
    yield put(addCandidateActionCreators.failure(error));
  }
}

export default {
  watchRequestCandidates,
  fetchCandidatesAsync,
  watchAddCandidate,
  AddCandidateAsync,
};

У моего редуктора есть два флага: isLoading и success.Оба флага меняются в зависимости от действий запроса, успеха и сбоя.

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

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

Каков наилучший метод для этого?

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

1 Ответ

0 голосов
/ 11 октября 2018

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

Внизу у меня есть компонент Exmaple, который выбирает статус из состояния избыточности и передает его как реквизит для Exmaple.Например, я могу отображать различные элементы div с текстом, основываясь на статусе, показанном в моем магазине.

Удачи! 

 import { connect } from 'react-redux'

    const ExampleComponent = ({ status }) => {
      return (
    <div>
      {status === 'SUCCESS' ? (<div>yaay</div>) : (<div>oh no...</div>)}
    </div>
  )
}

const mapStateToProps = state => {
  return {
    status: state.status
  }
}

const mapDispatchToProps = dispatch => {
  return {}
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ExampleComponent)
...