How to configure redux saga middleware in a react app java

Question

Can i know How to configure redux saga middleware in a react app java

Answer 1

To configure Redux-Saga middleware in a React (JavaScript) app:

1. Install dependencies

npm install redux redux-saga react-redux

2. Create the saga

// saga.js

import { takeEvery, call, put } from 'redux-saga/effects';

function* fetchData() {

  try {

    const data = yield call(() => fetch('/api/data').then(res => res.json()));

    yield put({ type: 'FETCH_SUCCESS', payload: data });

  } catch (error) {

    yield put({ type: 'FETCH_ERROR', error });

  }

}

export default function* rootSaga() {

  yield takeEvery('FETCH_REQUEST', fetchData);

}

3. Configure the middleware

// store.js

import { createStore, applyMiddleware } from 'redux';

import createSagaMiddleware from 'redux-saga';

import rootReducer from './reducers';

import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

sagaMiddleware.run(rootSaga);

export default store;

4. Provide the store

// index.js

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import App from './App';

import store from './store';

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

);