title: Changing the State Inside a React Component with using Redux
body: <p>I'm fairly new to Redux and using it with a React Application. I'm currently coding a Multiplayer Space Strategy Game. I have the redux set up and I have the state called inside my component, but I cannot seem to figure out how to change the state from a onClick inside a button. Below is code: First(The initial State Reducer), Second(Another Reducer to hold the new state), Third(Counter and CounterAction and index) Fourth(The component that the state change will be happening in).</p>
  <pre><code>    import uuid from 'react-uuid';
  const initalState = [
    {
      userId: 1,
      name: 'metal-mine',
      level: '0',
      productionAmount: '250',
      energy: '5',
      amount: '0',
    },
  ];
  
  const metalMineReducer = (state = initalState, action) =&gt; {
    // const { type, payload } = action;
  
    switch (action.type) {
      case 'METAL_MINE':
        state = {
          ...state,
          level: state.level + action.payload,
          productionAmount: state.amount + action.payload,
          energy: state.energy + action.payload,
          amount: state.amount + action.payload,
        };
      default:
        return state;
    }
  };
  
  export default metalMineReducer;
  </code></pre>
  <p>2nd</p>
  <pre><code>const currentMetalMine = (state = {}, action) =&gt; {
    switch (action.type) {
      case 'METAL_MINE':
        return {
          ...state,
          metal: action.payload,
          loggedIn: true,
        };
      default:
        return state;
    }
  };
  
  export default currentMetalMine;
  </code></pre>
  <p>3rd</p>
  <pre><code>const counter = (state = 1, action) =&gt; {
    switch (action.type) {
      case 'INCREMENT':
        return state + 1;
      case 'DECREMENT':
        return state - 1;
      default:
        return state;
    }
  };
  
  export default counter;
  </code></pre>
  <p>3.2</p>
  <pre><code>const increment = () =&gt; {
    return {
      type: 'INCREMENT',
    };
  };
  
  const decrement = () =&gt; {
    return {
      type: 'DECREMENT',
    };
  };
  
  export default {
    increment,
    decrement,
  };
  
  3.4
  
  import counterActions from './counterActions';
  import metalMineActions from './metalMineActions';
  
  const allActions = {
    counterActions,
    metalMineActions,
  };
  
  export default allActions;
  </code></pre>
  <p>Component state will be changed in</p>
  <pre><code>import React, { useCallback, useEffect, useState } from 'react';
  import { Button, Col, Container, Row } from 'react-bootstrap';
  import { useDispatch, useSelector } from 'react-redux';
  import MetalMine1 from './MinesImages/Metal-Mine.jpg';
  
  export default function MetalMine() {
    let metal = useSelector((state) =&gt; state.metalMine[0].level);
    let currentMetalMine = useSelector((state) =&gt; state.currentMetalMine);
    let counter = useSelector((state) =&gt; state.counter);
    const dispatch = useDispatch();
  
    console.log(metal);
    return (
      &lt;Container&gt;
        &lt;Row&gt;
          &lt;Col&gt;
            &lt;br /&gt;
            &lt;h4
              style={{
                color: 'whitesmoke',
                display: 'flex',
                justifyContent: 'center',
              }}
            &gt;
              Metal Mine Level: {metal}
            &lt;/h4&gt;
            &lt;br /&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;Row&gt;
          &lt;Col style={{ display: 'flex', justifyContent: 'center' }}&gt;
            &lt;img src={MetalMine1} alt='Metal Mine' height='300px' width='300px' /&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br /&gt;
        &lt;Row&gt;
          &lt;Button
            variant='outline-dark'
            style={{ color: 'whitesmoke', fontSize: '20px' }}
          &gt;
            Upgrade
          &lt;/Button&gt;
        &lt;/Row&gt;
        &lt;br /&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>
  <p>so after looking back at some documentation I have this updating the state in the component, but I need it to change the state and increment by 1.</p>
  <pre><code>export default function MetalMine() {
    let currentMetalMine = useSelector((state) =&gt; state.currentMetalMine);
    let counter = useSelector((state) =&gt; state.counter);
    const dispatch = useDispatch();
  
    const [metal, setMetal] = useState(useSelector((state) =&gt; state.metalMine));
    console.log(metal);
  
    const increment = () =&gt; {
      setMetal((counter) =&gt; counter + 1);
    };
  
  
  
    return (
      &lt;Container&gt;
        &lt;Row&gt;
          &lt;Col&gt;
            &lt;br /&gt;
            &lt;h4
              style={{
                color: 'whitesmoke',
                display: 'flex',
                justifyContent: 'center',
              }}
            &gt;
              Metal Mine Level: {metal.level}
            &lt;/h4&gt;
            &lt;br /&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;Row&gt;
          &lt;Col style={{ display: 'flex', justifyContent: 'center' }}&gt;
            &lt;img src={MetalMine1} alt='Metal Mine' height='300px' width='300px' /&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
        &lt;br /&gt;
        &lt;Row&gt;
          &lt;Button
            onClick={increment}
            variant='outline-dark'
            style={{ color: 'whitesmoke', fontSize: '20px' }}
          &gt;
            Upgrade
          &lt;/Button&gt;
        &lt;/Row&gt;
        &lt;br /&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>
  <p><strong>DATA that needs to change the LEVEL</strong>*</p>
  <pre><code>{userId: 1, name: &quot;metal-mine&quot;, level: 0, productionAmount: &quot;250&quot;, energy: &quot;5&quot;, …}
  amount: &quot;0&quot;
  energy: &quot;5&quot;
  level: 0
  name: &quot;metal-mine&quot;
  productionAmount: &quot;250&quot;
  userId: 1
  </code></pre>
  <p>when I click upgrade on the metal mine it's adding 1 to the end of the object, but not updating the object.
  <a href="https://i.stack.imgur.com/uYlHl.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uYlHl.jpg" alt="adding 1 to the end of the object" /></a></p>
  <p>I hope that someone can help me figure out how to change the state. Any help would be appreciated!</p>