score:0
behavior such as ajax calls are referred to as "side effects", and generally live in either your components, "thunk" action creators, or other similar redux side effects addons such as "sagas".
please see this answer in the redux faq for more details:
score:1
the "teach a man to fish answer."
this depends on the type of call and the situation.
- generally for simple "gets" this can easily be done by placing them into your action creators as nader dabit has shown.
- there are many side effect management libraries which would opt for you to place them in their blocks(redux-sagas, axios calls, redux-thunk)
i use redux-sagas for now. at least until we decide yay or nay on async/await which is possibly coming in a newer version of js.
this may be the most important part!
just be sure to take into account the general "conventions" that are used with your particular set of tools usually found in the documentation, and be sure to google "best practices" in the future for things like this. this will help others new to your project to get their bearings and just jump in without ramping up learning your new customized version.
score:6
the easiest way to get started with this is to just add it into your actions, using a function called a thunk along with redux-thunk
. all you need to do is add thunk to your store:
import { createstore, applymiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootreducer from './reducers/index';
const store = createstore(
rootreducer,
applymiddleware(thunk)
);
then create a function in your actions that calls the api:
export const getdata() {
(dispatch) => {
return fetch('/api/data')
.then(response => response.json())
.then(json => dispatch(resolvedgetdata(json)))
}
}
export const resolvedgetdata(data) {
return {
type: 'resolved_get_data',
data
}
}
Source: stackoverflow.com
Related Query
- Where to put API calls in React/Redux architecture?
- Where I handle API calls in react-native and redux
- Nesting API calls in React Redux
- Sending response of multiple api calls from action to view file in react js with redux
- How to fetch sequence api calls where second api call need particular data from first api call result using react hooks?
- react redux with axios api calls
- How to make multiple api end point calls in sequential order with react redux javascript?
- Where should I put my dispatch in lifecycle react redux
- React / Redux and Multilingual (Internationalization) Apps - Architecture
- Where do I fetch initial data from server in a React Redux app?
- Handling api calls in Redux with Axios
- Where do I put coding logic in my React Application
- Where do long-running processes live in a React + Redux application?
- Where should I put images files in React project?
- Redux React create initial state from API
- Integrating React and OpenLayers within a Redux Architecture
- How to create API calls in REACT and FLUX
- Where to store WebRTC streams when building React app with redux
- Where to put enums in my react application
- Where to put all the screens which are common in multiple stack navigators? - React Navigation v5
- React redux api polling every x seconds
- How to mock API calls made within a React component being tested with Jest
- Correct way to throttle HTTP calls based on state in redux and react
- Paginate date-specific results from an API with React and Redux
- React: Where to put API call to be made on state change
- Uncaught ReferenceError: regeneratorRuntime is not defined in react 17, webpack 5 while making api calls through actions
- How to test API calls in react using jest and enzyme?
- Where to put network calls in a react+redux app
- How to handle side effects when migrating from Redux to React Context API + hooks
- Promise.then is not a function - handling multiple API calls in React
More Query from same tag
- Cx framework: How to set align:right and decimal precision on NumberField
- Higher Order Component (self) wrapping in React
- useEffect React Hook: detecting the change of a property for each object in an array
- Is it possible to implement a map method into another map method?
- ReactJS - How to style React Calendar
- React useState crashes
- React js useState hook. How to update state of a json object with an a array in it when a checkbox is clicked
- Redux reducers -- changing deeply-nested state
- How to filter data of a big Firestore list?
- TypeError: jwt.split is not a function at OAuth2Client.verifySignedJwtWithCertsAsync Node package: google-auth-library
- Can I define a function in a parent functional component so that a child PureComponent receiving the function as a prop will not rerender?
- react-animated-css not fired when list is updated
- Prevent FullCalendar (React) from refetching events & resources on every render
- How do I type the result of calling genMockFromModule when writing a manual mock in Jest?
- Search box with React-Query
- Uncaught TypeError: Cannot read properties of undefined (reading 'user')
- Could backend validation be avoided for "please type to confirm" delete pattern?
- @emotion/react ThemeProvider doesn't work
- How to make input accept certain extension?
- How to make a React Component change global CSS
- How to group nested array of objects in js
- Specify a React Component as defaultProp of another component
- How do you encode a file to base64 then upload as multipart file to backend api using JS?
- Static site generator that renders React to HTML directly (no React in output)?
- useEffect either doesn't have a dependency array, or dependencies changes on every render
- How can I get rid of '.module' part in ReactJS' CSS module names?
- How to track pageviews on React
- Why isnt my Netlify Contact Form working?
- Can't load JS bundle on route in React
- toLowerCase on TextInput value is creating duplicate text if capital letter created