CODEWITHSUNDEEP
reactjsreduxredux-saga
Leoni
Leoni

Reputation: 114

How to warn react component when redux saga put a success action?

I am using the redux action pattern (REQUEST, SUCCESS, FAILURE) along with redux saga. I made a watcher and worker saga just like that:

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

My reducer has two flags: isLoading and success. Both flags change based on the request, success and failure actions.

The problem is that I want my component to render different things when the success action is put on the redux state. I want to warn the component every time a _success action happens!

The flags that I have work well on the first time, but then I want them to reset when the component mounts or a user clicks a button because my component is a form, and I want the user to post many forms to the server.

What is the best practice for that?

The only thing I could think of was to create a _RESET action that would be called when the user clicks the button to fill up other form and when the component mounts, but I don't know if this is a good practice.

Upvotes: 1

Views: 1427

Answers (1)

Stephan Hovius
Stephan Hovius

Reputation: 391

You need to assign a higher order component, also called a Container, that connects the store with your component. When usgin a selector, your component will automatically update if that part of the state changes and passes that part of the state as a prop to your component. (as defined in dspatchstateToProps)

Down below i have a Exmaple component that select status from the redux state, and passes it as prop for Exmaple. in example i can render different div elements with text based on the status shown in my store.

Good luck!

 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)

Upvotes: 1

Related Questions