title: react js Axios request failed: TypeError: Cannot read property 'token' of undefined?
body: <p>i have get token from login with react redux, if i am try to authorized it with this token. the error is show <code>Axios request failed: TypeError: Cannot read property 'token' of undefined</code> i want to authorized it with token. the token is stored in localstorage but it can't authorized it when i am using <code>(Token ${props.token}</code> if i am trying this way <code>(Token 5302f4340a76cd80a855286c6d9e0e48d2f519cb}</code> then my AritcleList.js is Authorized it</p>
  <p>here is the react-redux authentication</p>
  <p>authAction.js</p>
  <pre><code>import axios from 'axios';
      import * as actionTypes from './actionTypes';
  
      export const authStart = () =&gt; {
          return {
              type: actionTypes.AUTH_START
          }
      }
  
      export const authSuccess = token =&gt; {
          return {
              type: actionTypes.AUTH_SUCCESS,
              token: token
          }
      }
  
      export const authFail = error =&gt; {
          return {
              type: actionTypes.AUTH_FAIL,
              error: error
          }
      }
  
      export const logout = () =&gt; {
          localStorage.removeItem('token');
          return {
              type: actionTypes.AUTH_LOGOUT
          };
      }
  
  
  
      export const authLogin = (userData) =&gt; {
          return dispatch =&gt; {
              dispatch(authStart());
              axios.post('http://localhost:8000/rest-auth/login/', userData)
                  .then(res =&gt; {
                      const token = res.data.key;
                      localStorage.setItem('token', token);
                      dispatch(authSuccess(token));
                  })
                  .catch(err =&gt; {
                      dispatch(authFail(err))
                  })
          }
      }
  </code></pre>
  <p>authReducer.js</p>
  <pre><code>import * as actionTypes from '../actions/actionTypes';
      import { updateObject } from '../utility';
  
      const initialState = {
          isAuthenticated: null,
          token: null,
          error: null,
          loading: false
      }
  
      const authStart = (state, action) =&gt; {
          return updateObject(state, {
              isAuthenticated: false,
              error: null,
              loading: true
          });
      }
  
      const authSuccess = (state, action) =&gt; {
          return updateObject(state, {
              isAuthenticated: true,
              token: action.token,
              error: null,
              loading: false
          });
      }
  
      const authFail = (state, action) =&gt; {
          return updateObject(state, {
              error: action.error,
              loading: false
          });
      }
  
      const authLogout = (state, action) =&gt; {
          return updateObject(state, {
              token: null
          });
      }
  
      export default function (state = initialState, action) {
          switch (action.type) {
              case actionTypes.AUTH_START: return authStart(state, action);
              case actionTypes.AUTH_SUCCESS: return authSuccess(state, action);
              case actionTypes.AUTH_FAIL: return authFail(state, action);
              case actionTypes.AUTH_LOGOUT: return authLogout(state, action);
              default:
                  return state;
          }
      }
  </code></pre>
  <p>articleList.js</p>
  <pre><code>import React, { useState, useEffect } from 'react';
      import { Container, Row, Col } from 'react-bootstrap';
      import Card from '../components/Card'
      import FullPageLoader from &quot;../components/FullPageLoader&quot;;
      import axios from 'axios';
      import { connect } from 'react-redux'
  
      const NewsList = () =&gt; {
          const [items, setItems] = useState([])
          const [isLoading, setLoading] = useState(true)
          const [isAuthenticated, setAuth] = useState(true); //i don't know how to authenticate it when i also login
  
          useEffect((props) =&gt; {
              const fetchItems = async () =&gt; {
                  try {
  const config = {
                      headers: {
                          'Content-Type': 'application/json',
                          Authorization: `Token ${props.token}`
                      }
                  }
                      const res = await axios.get(`${process.env.REACT_APP_API_URL}/api/`, config);
                      setItems(res.data)
                      setLoading(false);
                  }
                  catch (err) {
                      console.log(` Axios request failed: ${err}`);
                  }
              }
              fetchItems()
          })
          }, [items]);
          return (
              &lt;Container className=&quot;mt-5&quot;&gt;
                  &lt; div className=&quot;bread-header&quot; &gt;
                      &lt;h5&gt;Dashboard&lt;/h5&gt;
                  &lt;/div &gt;
                  &lt;hr /&gt;
                  &lt;Row&gt;
                      &lt;Col sm={8}&gt;
                          {
                              isLoading ? &lt;FullPageLoader /&gt; :
                                  &lt;div&gt;
                                      {itemData.map((item, index) =&gt; (
                                          &lt;Card key={index} item={item} isAuthenticated={isAuthenticated} &gt;&lt;/Card&gt;
                                      ))}
                                  &lt;/div&gt;
                          }
                      &lt;/Col&gt;
                  &lt;/Row&gt;
              &lt;/Container &gt;
          )
      }
  
      const mapStateToProps = (state) =&gt; {
          return {
              isAuthenticated: state.auth.token,
          }
      }
      export default connect(mapStateToProps)(NewsList)
  </code></pre>