React-Redux: Dispatching on Constructor - props.store.state not updated

Question

I am very new at React and Redux both, I have only been using both for about 2 - 3 weeks to develop an alpha version of an application.

Though most of the tutorials on using Redux with React seemed to be pretty complicated I found one that allowed me to get some quick code down to try very simple scenarios within my application.

The main problem I seem to face at the moment is: I want to click on an image of and show the details of said property on another page (routed to using react-router, passing id in the path - to clarify in the current code i am using the hardcoded id of 22 an the id is not passed in the path yet). I thought it would as straight forward as clicking on the app then in either the constructor or componentWillMount method I could call this.props.foo(id) and then get the property using this.props.store.foo but it seems as though the store is not updated at that time. But if i called this.props.foo(id) in the handleClick method of the page before redirecting then it would work, but on refresh the store is back to default and causes an error.

I am just wondering if I am just taking a completely wrong approach to this.. or just missing something.

The code may be too much, just let me know if I should trim it down... Functions to look for are the:

handleImageClick() - > Results.js

constructor() - > BuyDetails.js Code:

Index.js

let state = {
    results: [],
    selectedState:{},
};

let reducer = (state, action) => {
  console.log("in reducer" + action.type);
  switch (action.type) {
    case 'ADD_RESULTS': 
        console.log("in reducer add");
        console.log("in reducer results = " + action.results);
        var newState = Object.assign({}, state)
        newState.results = action.results
        console.log("in reducer add " + JSON.stringify(newState))
        return newState
    case 'GET_RESULTS': 
        console.log("in reducer get state = " + state.results[0].id);
        var newState = Object.assign({}, state)
        for (var result of state.results){
            if (result.id === action.id){
                console.log(result.img)

                newState.selectedState = result
                console.log(newState.selectedState.location.address)

            }
        }
        console.log(newState.selectedState.location.address)
        console.log(JSON.stringify(newState));
        return newState
    default: 
        return state
  }
}

let store = createStore(reducer, state)

let mapStateToProps = state => ({
  store: state
})

let mapDispatchToProps = dispatch => ({
  addResults: (results) => dispatch({type: 'ADD_RESULTS', results:results}),
  getSelectedResult: (id) => dispatch({type: 'GET_RESULTS', id:id}),
})

const ConnectedAppComponent = connect(
    mapStateToProps, mapDispatchToProps
)(App)

const ConnectedResultsComponent = connect(
    mapStateToProps, mapDispatchToProps
)(Results)

const ConnectedBuyDetailsComponent = connect(
    mapStateToProps, mapDispatchToProps
)(BuyDetails)

ReactDOM.render(
  
      
        
        {/* add the routes here */}
        
        
      
  , 
  document.getElementById('root')
);

Results.js

class Results extends Component{
   constructor(props) {
      super(props);
      this.state = {open: true, openProfile:false, anchorEl: null,dataSet:this.props.store.results};
      console.log(this.state.dataSet.length)
      console.log(this.state.dataSet[0].img)

   }
   handleTouchTap = (event) => {
    // This prevents ghost click.
    console.log("touch tap");
    event.preventDefault();
    const tempState = this.state;
    tempState.openProfile = true
    tempState.anchorEl = event.currentTarget
    this.setState(tempState)
    /*this.setState({
      openProfile: true,
      anchorEl: event.currentTarget,
    });*/
  };

  handleRequestClose = () => {
    const tempState = this.state;
    tempState.openProfile = false
    tempState.anchorEl = null
    this.setState(tempState)
   /*this.setState({
      openProfile: false,
    });*/
  };
  handleToggle = () => this.setState({open: !this.state.open});
  handleImageClick(){
      //This is where i could be doing this.props.getSelectedResult(22); and it would work but causes issues on refresh
      const path = `/buyDetails`
      this.context.router.push(path)
  }
  render() {
    return 
          
          
            

              
                menu
                {/*menu*/}
                            
              
                
                 search
                 
              

              
                
                
                
                
                
                
                
                  
                  
                
              

            
            
            
            
            
            
              
                
                 this.handleImageClick()}/>
              
            
          
        
  }
}
Results.contextTypes = {
  router: React.PropTypes.object
}

export default Results;

BuyDetails.js

class BuyDetails extends Component{
   constructor(props) {
      super(props); 


       //dispatching the action here
    this.props.getSelectedResult(22);

    //getting the selected object from the props.state ... but it will still be = {}
    this.state = {open: true, openProfile:false, anchorEl: null,data:this.props.store.selectedState};
   }
   componentWillMount() {



  }

   handleTouchTap = (event) => {
    console.log('in buy detail: ' + JSON.stringify(this.props.store.selectedState) + JSON.stringify(this.props.store.results));
    // This prevents ghost click.
    console.log("touch tap2");
    event.preventDefault();
    const tempState = this.state;
    tempState.openProfile = true
    tempState.anchorEl = event.currentTarget
    this.setState(tempState)
    /*this.setState({
      openProfile: true,
      anchorEl: event.currentTarget,
    });*/
  };

  handleRequestClose = () => {
    const tempState = this.state;
    tempState.openProfile = false
    tempState.anchorEl = null
    this.setState(tempState)
   /*this.setState({
      openProfile: false,
    });*/
  };
   handleToggle = () => this.setState({open: !this.state.open});

  render() {
    return 
          
          
            

              
                menu
                {/*menu*/}
                            
              
                
                 search
                 
              

              
                
                
                
                
                
                
                
                  
                  
                
              

            
            
            
            
            
              
                
              
            
          
        
  }
}
function isEmpty(obj) {
    for(var key in obj) {
        if(obj.hasOwnProperty(key))
            return false;
    }
    return true;
}
export default BuyDetails;

Thanks Everyone... In Advance :)

+++UPDATE - Still not working+++

Here is the code for another approach i tried which was just calling the dispatch in componentWillMount() then just passing this.props.store.selectedState directly to the child component.

BuyDetails.js

class BuyDetails extends Component{
   constructor(props) {
      super(props);

      this.state = {open: true, openProfile:false, anchorEl: null,data:{}};
      //console.log('in buy details '+ JSON.stringify(this.state.data));

   }
   componentWillMount() {

    //dispatching the action here... it is still this.props.store.selectedState is still = {}
    this.props.getSelectedResult(22);
  }

   handleTouchTap = (event) => {
    console.log('in buy detail: ' + JSON.stringify(this.props.store.selectedState) + JSON.stringify(this.props.store.results));
    // This prevents ghost click.
    console.log("touch tap2");
    event.preventDefault();
    const tempState = this.state;
    tempState.openProfile = true
    tempState.anchorEl = event.currentTarget
    this.setState(tempState)
    /*this.setState({
      openProfile: true,
      anchorEl: event.currentTarget,
    });*/
  };

  handleRequestClose = () => {
    const tempState = this.state;
    tempState.openProfile = false
    tempState.anchorEl = null
    this.setState(tempState)
   /*this.setState({
      openProfile: false,
    });*/
  };
   handleToggle = () => this.setState({open: !this.state.open});

  render() {
    return 
          
          
            

              
                menu
                {/*menu*/}
                            
              
                
                 search
                 
              

              
                
                
                
                
                
                
                
                  
                  
                
              

            
            
            
            
            
              
                
              
            
          
        
  }
}
function isEmpty(obj) {
    for(var key in obj) {
        if(obj.hasOwnProperty(key))
            return false;
    }
    return true;
}
export default BuyDetails;

Tyler Sebastian · Accepted Answer

I wouldn't fetch the item in the details component, at least not explicitly.

Consider:

A details component:

class DetailsComponent extends React.Component {
    // the item is now available in props.item
}

function mapStateToProps(state, props) {
    return {
        item: state.getSelectedItem()
    };
}

export default connect(mapStateToProps)(DetailsComponent);

A list component:

class ListComponent extends React.Component {
    ...

    onImageClick = (item) => {
        this.props.setSelectedItem(item);
    }

    ...
}

This relies on set/getSelectedItem actions which set some relevant state. The details component will automatically grab the selected item when it's mounted.

Another thing to consider would be, if the two components were being rendered simultaneously (in a list/detail style UI, for example), would be to lift the selected state up into the parent state (parent of both components).

class ParentComponent extends React.Component {
    ...

    onItemSelected = (item) => {
        this.setState({ selectedItem: item });
    }

    render() {
        return (
            
            
        );
    }
}

That all said, you posted a lot of code and it's a little hard to tell what's going on. Hopefully something I've written above helps with your issue.

React-Redux: Dispatching on Constructor -> props.store.state not updated

Answers (1)

Related Questions

React-Redux: Dispatching on Constructor -&gt; props.store.state not updated

Answers (1)

Related Questions

React-Redux: Dispatching on Constructor -> props.store.state not updated