My useSelector variable is printing Undefined even when Reducer has returned the value

Question

I have this saga that performs an http request and performs a Dispatch on my Reducer:

// worker Saga: will be fired on GET_FILIAIS_REQUEST actions
function* fetchFiliais(action) {
    try {
        const data = yield call(LoginServices.fetchFiliaisApi);
        yield put(allActions.loginActions.receiveFilialData(data));
    } catch (e) {
        yield put({type: 'FETCH_FILIAIS_FAILED', message: e.message})
    }
}

/*
  Starts fetchFiliais on each dispatched `GET_FILIAIS_REQUEST` action.
*/

export default function* loginSaga() {
    yield takeEvery("GET_FILIAIS_REQUEST", fetchFiliais);
}

In my login component I perform a Dispatch to call this saga:

const Login = props => {
  const dispatch = useDispatch()
  const filiais = useSelector(state => state.filiais)
  useEffect(() => {
    dispatch({type: 'GET_FILIAIS_REQUEST'})
    setTimeout(function(){ console.log(filiais); }, 5000);
  }, [dispatch, filiais])

This is my Return. In my console.log() you are correctly printing the type and payload, including printing "enter correct case":

const currentUser = (state = {}, action) => {
    console.log(action.type)
    console.log(action.payload)

    switch(action.type){
        case "SET_USER":
            return {
                ...state,
                user: action.payload,
                loggedIn: true
            }
        case "LOG_OUT":
            return {
                ...state,
                user: {},
                loggedIn: false
            }
        case "RECEIVE_FILIAL_DATA":
            console.log('enter correct case')
            return {
                ...state,
                filiais: action.payload
            }
        default:
            return state
    }

But my console.log() that I put in the branch variable is printing Undefined. Because?

This is my index.js:

import loginSaga from './pages/login/login-form/saga'

// create the saga middleware
const sagaMiddleware = createSagaMiddleware()

const store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware)
)

// then run the saga
sagaMiddleware.run(loginSaga)

ReactDOM.render(
    <Provider store={store}>
        <Router>
            <Route path="/" component={App} />
        </Router>
    </Provider>, document.getElementById('root'));

This is my root Reducer:

import currentUser from './login'
import { combineReducers } from 'redux'

const rootReducer = combineReducers({
    currentUser
})

export default rootReducer

Answer 1

There are two unrelated problems in your code, so I’m going to split the answer into parts:

How your state works

First, you are trying to seek membership value directly in your Return with the line:

const filiais = useSelector(state => state.filiais)

your state, as you described in the question, is actually composed of a higher state currentUser and this will contain loggedIn, filias and user. Therefore, to access affiliates by useSelector, you need to use:

 const filiais = useSelector(state => state.currentUser.filiais)

This will effectively return the affiliations of the Redux state.

useEffect should NOT always be run

Note that in your Login component, you are running the useEffect where there is a change in dispatch and in filias:

useEffect(() => {
  dispatch({type: 'GET_FILIAIS_REQUEST'})
  setTimeout(function(){ console.log(filiais); }, 5000);
}, [dispatch, filiais]) //Aqui você atrelá efeitos quando houverem alterações em dispatch ou filias

However, note that in the body of this useEffect you launch a request for affiliates, which, if successfully completed, will cause a change in affiliates, which will consequently trigger the effect hook, which will launch the Dispatch, which will cause the change of affiliates in case of success, which... Understand? This will cause your program to constantly launch requests to update affiliates until a failure occurs. To solve this problem you need to perform the effect only in creation of your component, for this, you must update the useEffect for:

useEffect(() => {
  dispatch({type: 'GET_FILIAIS_REQUEST'})
  setTimeout(function(){ console.log(filiais); }, 5000);
}, [])

Since when you attach an empty vector to useEffect, it will only perform on component assembly (analogous to the old componentDidMount()), this will cause your affiliates to be updated only once and consequently either you will have all affiliates or you should do the error handling, creating the necessary action to do so in your Return (with the action FETCH_FILIAIS_FAILED that you created).