title: What is the right way to update state with redux in a react application?
body: <p>Im new to react and taking a course right now. I find state a bit confusing with regards to updating it with async code. In the tutorial that I am doing I swear it said that you need to use <a href="https://www.npmjs.com/package/redux-thunk" rel="nofollow noreferrer">thunk</a> in order to handle updating state with react/redux. I am skeptical of this, and being that I am new, I don't really completely understand that. I have written this react component and reducer, and it works fine in the sense that it will update the blog send it to the server, receive it back, and update the state if a 200 response is received, but I am wondering if there is something wrong with it, and not the proper way to update state with data coming from an http request.</p>
  
  <p>Blog component</p>
  
  <pre><code>import React, {Component} from 'react';
  import axios from '../../http/axios/axios';
  import Card from '../../components/UI/Card/Card';
  import classes from '../Container.css';
  import Button from '../../components/UI/Button/Button';
  import * as actionTypes from '../../store/actions/actions';
  import { connect } from 'react-redux';
  
  
      class Blog extends Component{
  
          toggleApprovedAndUpdate = (blog) =&gt; {
              blog.approved = ! blog.approved
              this.props.updateBlog(blog)
          }
  
          render() {
              let blogs = this.props.blgs.map((b, index) =&gt;
                      &lt;Card
                          title={b.title}
                          description={b.description}
                          approved={b.approved.toString()}
                          imagePath={b.image}
                          action={this.toggleApprovedAndUpdate.bind(this, b)}
                          key={index} /&gt;)
              return(
                  &lt;div&gt;
                      &lt;div className={classes.Container}&gt;
                          &lt;Button
                              label={"Get all blogs"}
                              action={this.props.getBlogs}
                          /&gt;
                          {blogs}
                      &lt;/div&gt;
                  &lt;/div&gt;
              )
          }
      }
  
  
      const mapStateToProps = state =&gt; {
          return {blgs: state.blog.blogs};
  
      };
  
      const mapDispatchToProps = dispatch =&gt; {
          return {
              getBlogs: () =&gt; {
                  axios.get('/blog')
                      .then((response) =&gt; {
                          return dispatch({type: actionTypes.GET_ALL_BLOGS, blogs: response.data})
                      })
              },
              updateBlog: (blog) =&gt; {
                  axios.put('/blog', blog)
                      .then((response) =&gt; {
                          return dispatch({type: actionTypes.UPDATE_BLOG, blogs: response.data})
                      })
              }
          }
      };
  
      export default connect(mapStateToProps, mapDispatchToProps)(Blog);
  </code></pre>
  
  <p>Blog reducer</p>
  
  <pre><code>import * as actionTypes from './actions';
  
  const initialState = {
      blogs: []
  }
  const reducer = (state = initialState, action) =&gt; {
      switch(action.type){
          case actionTypes.GET_ALL_BLOGS:
              return {
                  ...state,
                  blogs: action.blogs
              }
          case actionTypes.UPDATE_BLOG:
              return {
                  ...state,
                  blogs: state.blogs.map((blog) =&gt; blog.id === action.blogs.id ? {...blog, approved:action.blogs.approved}: blog )
              }
      }
      return state;
  }
  
  export default reducer;
  </code></pre>