React/Redux Flow Joanna style

import React from 'react'
import {fetchThreadds} from '../actions/fetchThreadds'
import Threaddform from '../components/Threaddform'
import Threaddlist from '../components/Threaddlist'
import Threaddshow from '../components/Threaddshow'
import {connect} from 'react-redux';
import {Route, Switch} from 'react-router-dom'

class ThreaddsContainer extends React.Component {
    
    componentDidMount(){
        this.props.fetchThreadds()
    }

    render(){
        console.log("render")
        return(

            <div>
                <Switch>
            <Route path='/thread/new' component={Threaddform}/>
 
             <Route path='/threads/:id' render={(routerProps) => <Threaddshow {...routerProps} threadds={this.props.threadds}/>}/>

            <Route exact path='/threads'render={()=> <Threaddlist threadds={this.props.threadds}/>} />
        
            </Switch>
            </div>
        )
    }
}

const mapStateToProps = state => {
 
    return {
        threadds: state.threadds
    }
}

export default connect(mapStateToProps, {fetchThreadds})(ThreaddsContainer);```

We access the data from our store with passing mapStateToProps as the first argument into our connect() function. This just allows us to have access to grab state from the store. But for that to happen we must create a mapStateToProps function which is allowing us to grab the specific state from our store that allows us to pass our component's props. This function is returning the data we need which in this case is the threadds. Then I am able to pass my Threadlist component the global state as props.

The render function then returns all html elements within it and renders it onto the page.


Then our componentDidMount function mounts which means that the HTML within my container and the HTML within my Threaddlist component has been rendered onto the DOM. They can be accessed if necessary and also allows me to manipulate the DOM and fetch any data needed. 


```  componentDidMount(){
 this.props.fetchThreadds()
				}
	```
        
         

Whereby ` this.props` is giving us access to global state and `fetchThreadds()` is the action creator allowing us to fetch all the threads from our backend( where I am storing all the data)

return (dispatch) => {
    fetch('http://localhost:3000/threadds')
    .then(res => res.json())
    .then(jsonData => dispatch({
         type: 'FETCH_THREADDS',
         payload: jsonData

    }))
}

Whereby a function is returned (due to Redux Thunk) from our API call with a payload of JSON data holding all the threads. Due to Redux Thunk and our connect function in which we are passing in 
fetchhThreadd  as a second arguement we are able to dispatch that function and action to our reducer as well as the store. 

```switch(action.type) {
    case 'FETCH_THREADDS':
       return {threadds: action.payload} ```
			 

Our reducer matches our type which is ``` 'FETCH_THREADDS' ``` with the relevant case statement which is also ```'FETCH_THREADDS' ``` and our reducers allows us to return our payload of data and allow that data to be saved in the store as threads. 

The process repeats because the first time around when we were trying to get access to the store there was nothing in our store this was just allowing us to create a foundation so when we have access to the data it renders pretty quickly (However the component also mounts whenever there is a change in the store)

So again we able to get a specific state from our store and allow it to pass the props to the relevant components.

Now that the Threaddlist component has access to props and now we can map the all the threads in the store.

return(
    <div> 
        <Clicker/>
        {props.threadds.map(threadd => 
        
        <div key={threadd.id}> <Button size='lg' variant="outline-dark"><Link to={`/threads/${threadd.id}`}>{threadd.thread_title}<br></br></Link></Button>
        </div>
        )}
                    
) }