title: Redux toolkit API calls
body: <p>i need some help understanding redux toolkit, i watched and read several good tutorials but it seems they all adding some extras to the tutorial, which complicates basic understanding.</p>
  <p>Firstly, here is my userSlice, store and signup component.</p>
  <p><a href="https://i.stack.imgur.com/zqNYz.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p><a href="https://i.stack.imgur.com/lVTku.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p><a href="https://i.stack.imgur.com/xt1M1.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>From what i learned base on Redux documentation my userSlice , has everything ( initial state, reducers, actions).
  So when i write a code :</p>
  <pre><code>   const handleSubmit = (e) =&gt; {
       e.preventDefault();
       dispatch(signup(formData))
  </code></pre>
  <p>I understand that dispatch takes an action that was declared in the slice
  and changes the state of the user from an empty object to the payload that was passed in the dispatch function like this :</p>
  <pre><code>    reducers: {
          signup:(state, action) =&gt; {
              // state.name = action.payload.name;
              // state.email = action.payload.email;
              // state.password = action.payload.password;
              // state.passwordConfirmation = action.payload.passwordConfirmation;
              // // state.value = action.payload
              state.user = action.payload
          },
  </code></pre>
  <p>Now here's where i get confused - at this point of the code redux already dispatched to the store and holds a state for example { name: JON, EMAIL: JON@yahoo.com, password: 123...ect}</p>
  <p>I also have access to this data via useSelector.</p>
  <p>I get confused because in all of the tutorials another code is written to send this data to the API ( maybe it's just separation of concerns ),
  I think that the simplest way to write this logic is a fetch promise to the API passing the data from the  redux store:</p>
  <pre><code>import React, { useState } from 'react'
  import {useDispatch, useSelector}  from 'react-redux'
  import { useNavigate } from 'react-router-dom'
  import {signup} from '../../redux/userSlice';
  import userReducer from '../../redux/userSlice';
  
  function SignUp() {
      const [formData, setFormData] = useState({
        name: '',
        email: '',
        password: '',
        passwordConfirmation: ''
      })
  
      const navigate = useNavigate();
      const dispatch = useDispatch();
  
      console.log(formData)
      console.log(userReducer)
  
     const handleSubmit = (e) =&gt; {
       e.preventDefault();
       dispatch(signup(formData))
  
       const signedUser = useSelector((state) =&gt; {
         return state.user
       })
  
    //    fetch(url, {
    //      method: 'POST',
    //      headers: {
    //        &quot;Accept&quot;: &quot;application/json&quot;,
    //        'Content-Type': &quot;application/json&quot;,
    //      },
    //      body: JSON.stringify(signedUser)
    //    }
    //    )
    //      .then(response =&gt; response.json())
    //      .then((data) =&gt; {
    //        if (data) {
    //          navigate(`user/${data.id}`)
    //        }
    //      })
    //    setFormData({});
       
    //  }
  
  
     
  </code></pre>
  <p>Appreciate any help on this!</p>