Using Redux Saga in a big project

redux-saga typescript
redux-saga architecture
redux-saga post request example
redux-saga example
redux-saga react native
redux-saga medium
react-redux-saga boilerplate
redux-saga best practices

I am new to reactjs and trying to learn saga.

I have built a root saga file as follows.

import { all } from 'redux-saga/effects';

import { watchBookFetchRequest } from './bookSaga'
import { watchAuthRequest, watchIsLoggedInRequest, watchLogoutRequest } from './authSaga'

export default function* rootSaga() {
   yield all([
    watchAuthRequest(),
    watchBookFetchRequest(),
    watchIsLoggedInRequest(),
    watchLogoutRequest()
   ]);
}

For each module, i have created a separate saga file and put all those related actions in that file.

Finally, i took all those actions and combined them in root saga.

I assume, when the project becomes big and more complex and has a lot of modules, all the watchers will be added in the same way like the above code

export default function* rootSaga() {
   yield all([
    watchRequest1(),
    watchRequest2()
    .
    .
    .
    watchRequestn()
   ]);
}

That is, the root saga will be containing quite a lot of watchers - Watchers for login, dashboard, books, accounts and so on..

Is this the correct way of doing this?

Organising sagas is a lot like organising reducers. You will also probably start up using combineReducers in root reducer with a flat list of all reducers and it can even scale pretty well. Long lists of reducers/sagas aren't usually a source of much problems.

However eventually in both cases you might want to introduce a tree structure. For example if your application looks like this:

+-- services/
|   +-- live-updates/
|   |   +-- live-updates-saga.js
|   +-- local-storage/
|   |   +-- local-storage-saga.js
|   +-- services-saga.js
+-- sections/
|   +-- home/
|   |   +-- home-saga.js
|   +-- contacts/
|   |   +-- contacts-saga.js
|   +-- sections-saga.js
+-- root-saga.js

You might run your sagas this way:

// root-saga.js
function* rootSaga () {
    yield all([
        fork(servicesSaga),
        fork(sectionsSaga),
    ])
}

// services-saga.js
function* servicesSaga () {
    yield all([
        fork(liveUpdatesSaga),
        fork(localStorageSaga),
    ])
}

// sections-saga.js
function* sectionsSaga () {
    yield all([
        fork(homeSaga),
        fork(conactsSaga),
    ])
}

// live-updates/local-storage/home/contacts-saga.js
function* liveUpdatesSaga () {
    yield takeEvery(XYZ, xyzSaga)
}

I wouldn't call either solution the "correct" one. Just experiment what suites you better.

Scalable Redux architecture for React Projects with Redux-Saga , It is also lightweight, about 2KB (dependencies included), so you don't have to worry about the application size getting too big. Since we get the� Project Setup; Integrating Redux to a project; Architecting the Redux; Prerequisites. Node v10.x.x; Project Setup. We will be using create-react-appwith typescript to start, but this architecture can be applied to any existing project as well: $ yarn create react-app my-app --typescript. Then we can go to the project directory and start the app

Quoting Martin...

I wouldn't call either solution the "correct" one. Just experiment what suites you better.

He's right but you want to hear from other devs so: in my current project the file system is organised as Martin showed but the root saga is still elementary

export function* rootSaga() {
  yield spawn(authSaga);

  while (true) {
    yield take(LOGIN_SUCCESS);
    // the indipendent sagas are all started after the LOGIN_SUCCESS action

    const tasks = [
      yield fork(pollBtcValueSaga),
      yield fork(getConfigSaga),
      yield fork(setTimeSaga),
      // and so on...
    ];
    console.log("sagas started");

    yield take([LOGOUT_REQUEST, FREEZE]);

    // the indipendent sagas are all stopped after the LOGOUT_REQUEST (or FREEZE) action
    for (let i = 0, n = tasks.length; i < n; i++) {
      yield cancel(tasks[i]);
    }
    console.log("️sagas stopped");
  }
}

In my root saga the only difference is that I spawn the authentication saga. That makes the auth saga completely independent (like if I would have started with sagaMiddleware.run(rootSaga);).

Then all the other sagas are started after a LOGIN_SUCCESS action and canceled after a LOGOUT_REQUEST one.

I then introduced the FREEZE action just for debugging purposes (I have a lot of network polls and logging that can bore me while debugging).

Anyway as the project grows I'll introduce the organization proposed by Martin.

How to organise your Redux code for a big project? � React, Do you have any experience using Redux for a big React project? I still have one question though: when mentioning redux-saga, you don't� Redux-saga is a redux middleware library, that is designed to make handling side effects in your redux app nice and simple. It achieves this by leveraging an ES6 feature called Generators, allowing

I use InitSagas and call it after initializing the Redux Store

//initSagas.js

import * as sagas from './sagas';

  const initSagas = (sagaMiddleware) => {
    Object.values(sagas).forEach(sagaMiddleware.run.bind(sagaMiddleware));
  };

export default initSagas;

I have a index.js in my Sagas folder and export all sagas from it to consume in InitSagas.js

In my getStore.js

//getSore.js
...

const store = createStore(rootReducer, composeEnhancers(...enhancers));

initSagas(sagaMiddleware);

return store;

Hope this answers your question.

The Top 99 Redux Saga Open Source Projects, Browse The Most Popular 99 Redux Saga Open Source Projects. A desktop app for inspecting your React JS and React Native projects. based on typescript with ssr, custom apollo-server and huge stack of modern utilities which will help� There is also a umd build of redux-saga available in the dist/ folder. When using the umd build redux-saga is available as ReduxSaga in the window object. This enables you to create Saga middleware without using ES6 import syntax like this: var sagaMiddleware = ReduxSaga. default The umd version is useful if you don't use Webpack or Browserify.

Read Me � Redux-Saga, redux-saga is a redux middleware, which means this thread can be started, paused and cancelled from the main application with normal redux actions, it has � Browse The Most Popular 99 Redux Saga Open Source Projects. Awesome Open Source. Awesome Open Source. Combined Topics. redux-saga x

Handle side-effects with Redux-Saga - javascript - Frontend, It's a widespread problem when developers end in callback hell in the large-size project with a large amount of interconnected asynchronous actions. And this is� Redux-saga provides a bunch of low-level functions for handling the complex branching of logic. For instance, if you want to start a piece of logic that’s quite independent first but merge it later, you can use `fork` and `join` – yielding a fork doesn't await for a subtask to finish.

Beyond Create React App: React Router, Redux, Redux Saga, and , These packages are large and will take some time to install. This will install the redux-saga dependency in your React project. After installing� cra-redux-saga-template. This project is an Create React App boilerplate with integration of Redux, and Redux-Saga for quick starting your redux applications with the power of Sagas / Generator Functions. Demo. Before starting with project, please headover to the Create-React-App documentation. Getting Started. Clone this repo

Comments
  • We just export arrays with the sagas from each module, and then spread them into the array passed to all in the rootSaga