首页 > 解决方案 > Organizing and keeping your flows and resources and sags clean with redux

问题描述

Good day,

I'm in the process of implementing my first large scale react + redux + react saga app which I intend to scale massively and still have a lot of open questions. As I understand it things work the following way

I also use connected react router to try and keep things purer and dispatch route changes through my store.

I try and keep a reducer per microservice resource in my application since I have many microservices I interact with for example.

In the beginning this worked really well, but I started getting a little confused on some things.

  1. Where do I 'chain' my side effects together?

So if for example a call to login fails and I raise an alert do I dispatch an action inside my saga for login?

And if I need to dispatch for example default signup for communication preferences do I do that in the saga and have one action?

What if this particular screen doesn't want to show an alert on failure? Would I pass an onError function into my action to be handled by my saga? (currently a business requirement to ignore a specific failure on the login screen)

  1. Where do I handle my routing?

When login succeeds I can easily dispatch a push event to route from my saga, but this seems unpure, and I'd like to handle this elsewhere, would I then add a change to state? this seems messy.

  1. Handling return sessions

Currently in my app I have a Token stored in localstorage. When the user hard refreshes the page I have a component at the top of my app which logs the user back in by dispatching an action.

However, is this async? will the children still render while that action is firing? my concern is I have a route checking a state value (isLoggedIn) as a child. This would then possibly cause a race condition on rendering.

Apologies for the multipart question, but the application from theory to practice for Redux apps is quite a big jump for me.

I really appreciate the reading of the question.

标签: javascriptreactjsreduxreact-routerredux-saga

解决方案


推荐阅读