score:1
i would not recommend using async calls inside the store. it can lead to an unpredictable state of the store. and probably you may have this error: flux dispatch.dispatch(...): cannot dispatch in the middle of a dispatch.
instead, your userservice
should handleaction
with the user data, once the user fetched. and your store should update then the user data.
for example,
user service:
userservice.fetchuserbyid = function(userid) {
apicall(userid).then(user => handleaction(useractions.fetch_user_by_id, user));
}
user store:
case useractions.fetch_user_by_id:
this.user = payload.data;
this.emit(user_fetch_completed);
break;
here is a good short article about fetching data with api and flux: https://medium.com/@tribou/flux-getting-data-from-an-api-b73b6478c015#.vei6eq5gt
then, you can write tests separately for your stores and services:
store test:
it('should fetch user by id', () => {
const userstore = require('../stores/userstore');
const mockuser = {name: 'test', id: 123};
handleaction(useractions.fetch_user_by_id, mockuser)
expect(userstore.user).toequal(mockuser);
})
service test:
it('should fetch user by id', (done) => {
const userservice = require('../service/userservice');
// userservice.fetchuserbyid(userid);
// here you can add spyon http service that you are using in the service
// and mock the response from that service
// and then validate that `handleaction` has been triggered
})
Source: stackoverflow.com
Related Query
- Testing Flux store with async api using Jasmine
- React Hook useEffect : fetch data using axios with async await .api calling continuous the same api
- Testing React Flux Store with Jest in ES6
- How to integrate axios api in react js with async and await using react hooks
- Using collections of data in a store with React and Flux
- Network error while using API on localhost, with Jest & React Testing Library
- Using react-redux with ajax call to API - How to store the API URL
- Testing React Functional Component with Hooks using Jest
- How do I store JWT and send them with every request using react
- Testing api call inside useEffect using react-testing-library
- Cannot read property '.then' of undefined when testing async action creators with redux and react
- Using async and await with export const
- Testing with React's Jest and Enzyme when async componentDidMount
- Using fetch API with mode: 'no-cors', can’t set request headers
- React app using API with another origin (CORS)
- Unable to get the name of the input when using getByRole while testing with testing-library
- Testing async actions with redux thunk
- Using an API call in ComponentDidMount to update Redux store makes my component render twice
- Using chrome api with React.js
- Jest testing with Node - Timeout - Async callback was not invoked within the 5000ms timeout specified by jest.setTimeout
- Using different API url for development and production with React and axios
- Post an object with fetch using react js and express API server
- Testing the `React.createRef` api with Enzyme
- How to get the element with the testid using react testing library?
- Flux calling actions with arguments managed in store
- JS unit testing using enzyme: how to wait for setState within component's method to finish before proceeding with test case
- What's the idiomatic way of testing a list with dynamic content using react-testing-library
- Request header not set as expected when using 'no-cors' mode with fetch API
- using useEffect in combination with Axios fetching API data returns null - how to deal with this?
- How to load React-select Async with initial options for edit item function when using a search API?
More Query from same tag
- React TS shared styled component props
- How can I insert data to my collection on my server-side main.js with meteor?
- Apollo Mutation - UI not updated after useMutation update
- REACT REDUX Uncaught ReferenceError
- Using NextJS with Redux. Should the store be re-initialised between pages with different preloaded states?
- How to update array of entity in React state?
- React not working with memo and tree structure
- React passing img src from Data.js to index.js but is showing as [object model] in page source
- How to resend queries to server every time a component is called in react-apollo and graphql
- reactjs error - onChange is not a function error
- Retry with useMutation (React Query)
- React Render Map last element doesnt update
- How to update passportJWT data after edit user data?
- react toggle listen to other node of html
- How to combine hooks(useEffect) with axios
- search data related to localstorage item
- The 'this.props.history.push()' is working for normal page but not working for nested components?
- How to Modify CSS Module Style via Javascript
- TypeError: Cannot read property 'then' of undefined on webservice
- Use context from consumer in children
- Changing the storage in Redux
- React Router - Cannot read property 'history' of undefined
- Return multiple <tr> lines in React
- SyntaxError: Unexpected token import with Jest
- Styling the UI Fabric Date Picker Callout
- React/Javascript question about async/await
- Is the definition of side effects in React the same as in functional programming?
- Using .env.local file for API Credentials to connect to my Airtable DB
- Ajax post call returns parsererror
- Adding array elements through multiple form fields in React