score:0
Accepted answer
I ended up with creating web service method which calculates share amount per entity, puts this data to map and returns to react using axios and redux. Not sure if this is the best solution to my problem, but it works.
Example of my working code => reducer:
export const ACTION_TYPES = {
FETCH_ENTITY_SHARE_AMOUNT: 'entity/FETCH_ENTITY_SHARE_AMOUNT'
};
const initialState = {
loading: false,
errorMessage: null,
entitiesShareAmountMap: Map,
updating: false,
updateSuccess: false
};
export type EntityState = Readonly<typeof initialState>;
// Reducer
export default (state: EntityState = initialState, action): EntityState => {
switch (action.type) {
case REQUEST(ACTION_TYPES.FETCH_ENTITY_SHARE_AMOUNT):
return {
...state,
errorMessage: null,
updateSuccess: false,
loading: true
};
case FAILURE(ACTION_TYPES.FETCH_ENTITY_SHARE_AMOUNT):
return {
...state,
loading: false,
updating: false,
updateSuccess: false,
errorMessage: action.payload
};
case SUCCESS(ACTION_TYPES.FETCH_ENTITY_SHARE_AMOUNT):
return {
...state,
loading: false,
entitiesShareAmountMap: action.payload.data
};
default:
return state;
}
};
const apiUrl = 'api/entities';
// Actions
export const getEntitiesShareAmountMap: IPayloadResult<any> = () => {
const requestUrl = `${apiUrl}/entities-share-amount`;
return {
type: ACTION_TYPES.FETCH_ENTITY_SHARE_AMOUNT,
payload: axios.get<Map<String, String>>(requestUrl)
};
};
react component:
export class Home extends React.Component {
componentDidMount() {
this.props.getEntities();
this.props.getEntitiesShareAmountMap();
}
render() {
const { entitiesList, entitiesShareAmountMap } = this.props;
return (
<Row>
<Col>
<Table>
<thead>
<tr>
<th>Name</th>
<th>Share</th>
</tr>
</thead>
<tbody>
{entitiesList.map((entity, i) => (
<tr key={`entity-${i}`}>
<td>{entity.name}</td>
<td>{entitiesShareAmountMap[lottery.id]}</td>
</tr>
))}
</tbody>
</Table>
</Col>
</Row>
);
}
}
const mapStateToProps = storeState => ({
entitiesList: storeState.myReducer.entities,
entitiesShareAmountMap: storeState.myReducer.entitiesShareAmountMap
});
const mapDispatchToProps = { getEntities, getEntitiesShareAmountMap };
type StateProps = ReturnType<typeof mapStateToProps>;
type DispatchProps = typeof mapDispatchToProps;
export default connect(
mapStateToProps,
mapDispatchToProps
)(Home);
Source: stackoverflow.com
Related Query
- How to provide dynamically calculated data in table using react and redux
- How can I cache data that I already requested and access it from the store using React and Redux Toolkit
- How do I display data from api using react and redux
- Add user input data to show in a table using react js and redux
- How necessary is it to use Redux in React and store data locally if you're using Firebase and its active listeners?
- How can I pass data to an object using React Hooks and Redux
- How to pass data to client using React redux and socket.io?
- React Redux - how to derive and then aggregate data in mapStateStateToProps using a selector?
- How to upload an Excel sheet file using react.js and display data to a table
- How to execute store.unsubscribe from useEffect using React hooks and Redux
- How to make the API call and display it in React JS using React Table and Axios?
- How to edit react bootstrap table and save data after editing
- how to display data in table using json in react js?
- How to get a data after react select using axios and ReactJS?
- How to retrieve data from the server using fetch get method and show it in a table
- How to add a tab dynamically when we click a button using React js and Bootsrap 4
- How to retrieve data from Redux store using functional components and avoiding useSelector & useDispatch
- How to send data from react and use the request body in express, using Axios?
- How to access a value of a dynamically named field in React using Redux Forms?
- How to make react data grid table cell editable and focused on click of a button without performing a double click action
- How to fix my React Context to render useEffect and reload table data
- How do I correctly add data from multiple endpoints called inside useEffect to the state object using React Hooks and Context API?
- React Redux re-fetch data using state and state change
- How to Assign react redux state api get data using axios
- how should we convert string data into array and display into react table
- Using RxJS and axios, how do you fetch data onClick in React component?
- How to get data from table row click using Semantic's React Table Component
- How to test mapStateToProps using React Redux and Jest?
- How can I get the data out of a table using Semantic UI React
- How to store and populate data into dataGrid or table using reactJs and reactHooks?
More Query from same tag
- Yup conditional validation based on a a non field value
- TypeError: _mappings__WEBPACK_IMPORTED_MODULE_1__.a[iconName] is not a function
- Build a dynamic string to filter a rest call
- ReactJs: TypeError: Cannot read property 'length' of undefined
- How can I access query parameters passed via <Link> within a class component?
- Dynamically setting the default selected item in a RadioGroup
- How can this SCSS still be used in this Codesandbox even it's not used by the React Component?
- "TypeError: Object(...) is not a function" react-redux-firebase
- How do I mock next router in this custom hook?
- React - Make Child component shrink when parent component shrinks
- Data Persistence Between Renders in Functional Component
- How to handle Formik's `handleChange` prop?
- How to test actions in Flux/React?
- Ionic, Js, React Function Call without callling
- check if two arrays contain identical objects - react componentDidUpdate
- Get an element created by a script in react without ref
- Trying to read products from back4app onto a web page with carditem view React & Back4APP
- How can i get input value, which located outside React app?
- React - Cannot read property 'question_desc' of undefined
- React: trigger onChange if input value is changing by state?
- React/CSS - Animate button width resize after content changes when width is auto
- how use props.children with ts
- Uncaught SyntaxError: Unexpected token < in React JS
- Learning React: why do we not have to use this.state.count in line 18 to access the count but we have to use this.state.imageUrl in line 12?
- Override styles in Fab button is not working
- React router renders component once after that only url changes
- ReactNative & Expo: Trouble incrementing/decrementing to cycle through an Array
- HTML file input accept .zip files also includes .xlsx, pptx, .docx
- Running npm run build in Heroku to serve a flask backend react frontend app
- How to use useTheme hook from Material-UI?