Advanced Redux: Design Patterns and Practices - Nir Kaufman | JSHeroes 2018
Why Stack Overflow recommends it
Stack Overflow users link it when asking about or recommending Redux structure where actions and reducers stay pure and API calls and other side effects live in middleware.
Recommended by 1 people across 1 different months, 2018 to 2019.
What it is
A conference talk from JSHeroes 2018 in which Nir Kaufman applies design patterns from microservices and messaging systems to Redux in single page apps. It covers keeping actions as plain objects, handling side effects in middleware, and namespacing action types by feature.
What people said
Strong rec sbqq · 2018-12 · Stack Overflow · on “Where should the business logic go (action creators or reducers) in react using redux?”
One of practices says that you should keep your reducers and actions pure and the real side-effect should happen inside your middlewares. With this approach you will keep the actions and reducers nice and clean and you can fully focus on your middlewares because they will become the only place, where side-effects can happen. I was really amazed when I watched presentation from Nir Kaufman and I'm encouraging you to watch his speak at ReactNYC Advanced Redux Patterns - Nir Kaufman @ ReactNYC [LINK] . This video helped me a lot when I was struggling with Redux the most. Also there is second speak about Redux and middlewares from Nir. You can check the second one here Advanced Redux: Design Pat
Cites Matheus Gomes · 2018-11 · Stack Overflow · on “How to run setSubmitting() outside the submit handler?”
I'm trying to implement the approach described on [this video] , where all Redux actions are just plain objects (as they were meant to be) and API calls are done by middlewares. By doing this, the dispatched actions are no longer thunks and can't return a Promise . So I won't be able to use Formik's setSubmitting (to set the isSubmitting flag to false ) inside the submit handler, like the code samples on Formik docs and other tutorials I've found. I've solved the issue in a kinda ugly way, saving a reference of setSubmitting to run it later, inside componentDidUpdate : import React, { Component } from 'react' import { Redirect } from 'react-router-dom' import LoginForm from 'path/to/LoginForm' im
Cites Anatole Lucet · 2019-11 · Stack Overflow · on “Typing custom action type”
I'm following a design pattern from this talk (you don't need to watch it to understand my issue) : [this video] The main concept is to give identifier to redux's type. For example an action creator for an api request should have a type like this : [Books] API_REQUEST . The action creator is basicaly combining [Books] and API_REQUEST then throw it as a type to it's own action. [Books] is given thought arguments of the action creator. It permit to do multiples api requests at the same time for multiples features and not confuse them in (for example) a middleware. So this is simple in pure Javascript. But with Typescript we need to type our actions for our middlewares and reducers. The main idea of