CODEWITHSUNDEEP
javascriptreactjsreact-redux
infodev
infodev

Reputation: 5245

useEffect does not trigger after store update

I'm trying to retrieve data from Api and save it in Redux store then print it on screen.

I'm using functional components.

Then when data cames back embedToken stay undefined , I think it should get updated when store 'refreshes'

App.js

import React, { useEffect, useState } from 'react';
import logo from './logo.svg';
import './App.css';
import { connect } from 'react-redux'
import { requestEmbedToken } from './redux/actions'

function App(props) {
  const [embedToken, setEmbedToken] = useState(props.token);
  useEffect(() => {
    if (props.token === undefined) {
      props.requestToken();
      console.log(props.token)

      setEmbedToken(props.token)
    }
  }, [props]);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          Here's the token {JSON.stringify(embedToken)}
      </header>
    </div>
  );

}
const mapStateToProps = (state) => ({
  token: state.embedToken,
})

const mapDispatchToProps = (dispatch) => {
  return ({
    requestToken: () => dispatch(requestEmbedToken())
  })
}
export default connect(mapStateToProps, mapDispatchToProps)(App)

Actions

import axios from 'axios';
export const saveEmbedToken = token => ({
    type: 'SAVE_EMBED_TOKEN',
    payload: {
        token
    }
})
export const requestEmbedToken = () => (dispatch) => {

    return axios.get('http://localhost:7071/api/getpbiTokens')
        .then(response => {
            console.log("token embed", response)
            dispatch(saveEmbedToken(response.data.token))
        })
}

Reducers

import { combineReducers } from 'redux'

function reportingActions(state = {}, action) {
    switch (action.type) {
        case 'SAVE_EMBED_TOKEN':
            return {
                ...state,

                embedToken: action.payload.token

            }
        default: // need this for default case
            return state

    }
}
const reportingReducers = combineReducers({
    reportingActions
})
export default reportingReducers

Upvotes: 0

Views: 235

Answers (1)

Aleks
Aleks

Reputation: 984

The actual path to the token is state.reportingActions.embedToken not state.embedToken

Fix this

const mapStateToProps = (state) => ({
  token: state.embedToken,
})

Upvotes: 1

Related Questions