How To Access Props In a functional components - reactjs

Question

I have some problem with component
When i use props i get same data in all of mates, but in GET_ODD action data is different
1)now how i can fix this porblem ?
2)how i can set interval for odd changes ? if this.props.odd.ad_time < nextProps.odd.ad_time change the odd in curenet props
json data for each odd :
{
"id": "24854545",
"home_od": "1.002",
"draw_od": "51.000",
"away_od": "51.000",
"ss": "3-1",
"time_str": "87",
"add_time": "1537706413"
}
reducer :
const initialState = {
odd: {}
};
function Markets(state = initialState, action) {
switch (action.type) {
case GET_ODD:
return {
...state,
...action.odd
};
default:
return state;
}
}
export default Markets
Markets action :
var marketsRESTRepository = new MarketsRESTRepository();
export const GET_ODD = "GET_ODD";
export function getOdd(odd) {
return {
type: GET_ODD,
odd
}
}
export function getAsyncOdd(eventId) {
return function (dispatch) {
marketsRESTRepository.getById(eventId).then(odd => {
dispatch(getOdd({odd}));
});
}
}
Action Odd data
same results for odds

Answer 1

in the market component try this :
import React, { Component } from "react";
import { connect } from 'react-redux';
import { getAsyncOdd } from "../../actions/markets.actions";
export class Markets extends Component {
constructor(props) {
super(props);
this.state = {
odds: {}
};
}
componentDidMount(){
this.props.getOdd(this.props.eventId);
this.setState({this.props.odd})
}
componentWillRecieveProps(nextProps) {
if(this.state.odds!==nextprops.odd){
this.setState({odds: nextprops.odd})
}
}
render() {
return (
<React.Fragment>
<span>{this.state.odds.home_od}</span>
<span>{this.state.odds.draw_od}</span>
<span>{this.state.odds.away_od}</span>
</React.Fragment>
);
}
}
function mapStateToProps({ markets }) {
return {
odd: markets.odd
}
}
function mapDispatchToProps(dispatch) {
return {
getOdd: (eventId) => dispatch(getAsyncOdd(eventId))
}
}
export default connect(mapStateToProps,
mapDispatchToProps
)(Markets)

Answer 2

Looks like the problem is with your reducer,
Why are you spreading the action? Since you are accessing it this way,
<span>{this.props.odd.home_od}</span>
Change it to this,
return {
...state,
add : action.odd
};

Answer 3

You have this:
dispatch(getOdd({odd}));
and the getOdd sync action will return this object:
{
type: "GET_ODD",
odd: {
odd: { /* data */}
}
}
which in turn will get dumped in the state by the reducer using the spread operator. I think you have to change the approach:
keep you getOdd action as is
when you call getOdd use it as getOdd(odd). No curly braces.
in you reducer, don't use the spread operator for the action. Use a specific key, for example:
return {
...state,
odd: action.odd
}
your async action looks good, just add a catch there and add a console.error so you know if something fails
For you 2 question. You can use one of the React life cycle methods to compare the current props and the next props coming and then perform that logic.
I hope it helps!