Advanced Redux Patterns - Nir Kaufman @ ReactNYC
Why Stack Overflow recommends it
Stack Overflow users link it when answering where Redux business logic and side effects should live, recommending a middleware-based approach instead of putting logic in reducers or components.
Recommended by 4 people across 4 different months, 2018 to 2019.
What it is
A 37-minute conference talk by Nir Kaufman at the ReactNYC meetup on advanced Redux patterns, drawing on command-query separation and enterprise integration patterns. It covers messaging, routing (filter, map, splitter) and transform (enricher, normalizer, translator) patterns implemented as middleware, with a live demo and Q&A.
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 [this video] . 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 Pa
Strong rec user5327424 · 2019-09 · Stack Overflow · on “redux Didnt Store in each state”
You need to await for your fetch call instead of returning newstate directly after declaring the promise to be run, not doing this causes the newstate to return immediately hence it is in its initial state . But don't do this, your redux reducers should be pure. You should not be making ajax calls in you reducers. See Perform Ajax Fetch in a Redux Reducer? [LINK] for more details. I recommend adapting some patterns for dealing with redux. I absolutely love the patterns outlined by Nir Kaufman see [this video] and [LINK] for its associated code
Recommends Federico · 2019-04 · Stack Overflow · on “Redux & React Router: Combing dispatch and navigation (history.push)”
A cleaner approach might be to use React Router's <Redirect> : class PostContainer extends React.Component { render() { if (userJustAddedAPostRightNow === true) { return <Redirect to='/posts' /> } return ( <div> <Post onSubmit={addPost}/> </div> ); } } export default connect(null, { addPost })(PostContainer); addPost would trigger a change of state if successful. It should change userJustAddedAPostRightNow to true, so that you'll be redirected to the posts' page. To avoid all those nested callbacks you can follow Nir Kaufman's approach [this video] and handle logic in middlewares: //src/middlewares/post.js export const newPost = ({dispatch}) => next => action => { next(action); if (action.type ==
Recommends dorriz · 2019-11 · Stack Overflow · on “Initiate data with redux better approach”
I wouldn't say dispatching from component lifecycle is the recommended approach , it certainly is used by many developers, but it couples in you component with data fetching (is that a good idea) ? Or should your component not know about how data is fetched and just consume it in some way. Your choice. You could use your own custom middleware to send the request. With that approach you have greater flexibility , you could dispatch actions like type:LOADING_DATA and any others depending on setting state while loading your data. Once the data is returned dispatch other action(s) which could be handled by other custom middleware(s) to normalise data etc and finally send it to your reducer. This