score:5
you code is similar to what thunk does.
as per redux
docs, actions should be pure. and they should always return same values for same input parameters. by using fetch
you are allowing action to return not specific value, rather value from server and that mean action response may vary upon time.
that is called side effects. and it's something what shouldn't be in redux actions by default.
but why?
yes, you can type it inside action like you have, in small apps it does not matter.
in larger application there are benefits of using redux-saga
:
actions are predictable, they just return payload like
{ type: 'fetch_posts', params: { category: 'programming' } }
and then you build middleware which will take actions with all data required to perform request to real api
possible advantages:
- cleaner codebase (but may be overhead on smaller applications)
- separation of "dummy" actions with all required information to perform requests and actual api middleware
- request parameters are visible directly in redux dev tools
- possible to easily
debounce
,throttle
fetches which may be really tricky with redux-thunk - possible to easily combine actions (wait for another event/fetch, chain events)
- possible to stop running tasks
from personal experience, on one project (larger codebase) we have started with redux-thunk
, but later we needed to integrate more advanced features, like throttle, and some dependencies between actions. so we rewrote everything to redux-saga
and it worked well for us.
score:1
you are kind of replicating redux-thunk here. a pure redux action creator should return an action object to be dispatched and not dispatch an action itself (see redux doc on action creator).
to better understand why your technic is a replication of redux-thunk, look at this post from its author
Source: stackoverflow.com
Related Query
- When should I use Redux Saga instead of Redux Thunk, and when should I use Redux Thunk instead of Redux Saga?
- Why use Redux Thunk
- Access to store.dispatch in a saga for use with react router redux
- How to use Redux Saga debounce but fetch first instead of waiting for n milliseconds
- Redux thunk - Error · Actions must be plain objects. Use custom middleware for async actions even with dispatch an object with key type
- Redux Thunk + Axios "Actions must be plain objects. Use custom middleware for async actions."
- TypeScript with Redux. Redux Saga How to wait for the LOAD_SUCCESS to return and save your data for later use
- Actions must be plain objects. Use custom middleware for async actions Saga thunk I do have so far in my store
- Why use Redux over Facebook Flux?
- Why do Flux architecture examples use constants for action types instead of strings?
- React Native - Why we use the tintColor property for Image component?
- Why do I have to use "require" instead of "import from" for an image in React?
- Why to use separate CSS files for components in React.js
- How redux work when multiple components use parts of complex objects for it's source
- What is redux for if I use a database for my react app?
- Why does React have to use setState for state update?
- Does a redux saga for API requests make sense?
- why should I not use CDN for react & babel?
- React + Redux + Router - should I use one state/store for all pages/components?
- How to use redux thunk to redirect after success or error?
- Why does create-react-app now use a function component for App?
- Why can’t we use GraphQL just with Redux
- Using React, why is redux saga not intercepting the action?
- Why should I use Redux in this example?
- Why use redux-thunk or redux-saga for fetches?
- Redux / Redux Saga - how to wait for the store to update?
- How do we return a Promise from a store.dispatch in Redux - saga so that we can wait for the resolve and then render in SSR?
- Expected 0 arguments, but got 1.ts(2554) when implement redux use typesafe-actions for action
- Wait for redux action to finish dispatching when using redux saga
- Is it bad to use React Hook and redux together for React functional component?
More Query from same tag
- Autorization token from React doesn't pass Java Spring Boot filter
- How to Keep active state of an item inside of component that iterates over some dataset
- create-react-app web server respond with CORS headers
- Razzle, IE11 and HappiJS bundling
- How to fix Unexpected token error, expected “}”
- Problems POSTing json to Node/Express server from Axios/React
- Material-UI TexField Select - different display when expanded
- Is it possible to customize react build (web-pack build)?
- Why is state not getting updated in React?
- React Autocomplete matching highlighted word
- Pseudo element not showing in react
- React Link element causing the app to fail
- Better debug console output for errors in react StatelessComponent
- Navigation within section of a page using react router
- Display Alert inside function call not working Reactjs
- dynamic label width textfield outlined material ui react
- Status Code: 405 Not Allowed in React frontend hosted on Heroku
- Unresolved import with npm React portlet with Liferay ce 7.0
- Why can't i pass an object from my mapped state as a parameter in my react route link
- how to set current location getting from goelocation into google map using react
- Display html content in iframe via props in React
- wants to change the color of div in react
- Redux-Form: setting "component" prop as "React.DOM.input" yields error
- display multiply calculations from input data
- How to fetch react-cookies if CORS is blocking it
- Autocomplete Chip when multiple is false
- React: Encapsule selection text
- Best way to handle loading, success and error in redux
- React TSX - Use Lambda expression in React element prop
- Next.js project build error: Entry point for implicit type library 'build'