Usereducer state is alway undefined when used with useContext

Question

I am trying to use useReduce along with useContext, when I console the value in a reducer, I am getting array of an object in the console, but when I try to access the state from another component, I am getting the state is undefined. State.map() is completely empty.

Here is my code

App.js

import React, { createContext, useReducer, useEffect } from 'react';

import Uploadproject from './Uploadproject';
import Getprojects, { projectget } from './Getprojects';
import reducer from './reducer/Usereducer';

export const Contextstate = createContext();

const App = () => {
  const initialvalue = null;
  const [state, dispatch] = useReducer(reducer, initialvalue);

  const updatestate = async () => {
    const data = await projectget();
    dispatch({ type: 'add', payload: 'from app.js' });
  };

  useEffect(() => {
    updatestate();
  }, []);

  return (
    <>
      <Contextstate.Provider value={{ state, dispatch }}>
        <Uploadproject />
        <Getprojects />
      </Contextstate.Provider>
    </>
  );
};

export default App;

Usereducer.js

import { projectget } from '../Getprojects';

const reducer = (state, action) => {
  if (action.type === 'add') {
    projectget().then((result) => {
      console.log(result);
      // state = [ ...result]
      state = result;
      console.log(state);
      return state;
    });
  }
};
export default reducer;

Getprojects.js

import React, { useContext, useEffect, useState } from 'react';

import { Contextstate } from './App';

const Getprojects = () => {
  const { state, dispatch } = useContext(Contextstate);
  const getstate = () => {
    dispatch({ type: 'add', payload: 'from getprojects' });
  };

  useEffect(() => {
    getstate();
  }, []);

  console.log(state);

  return (
    <>
      <div>
        <h1>Projects</h1>
        {state &&
          state.map((cur) => {
            return (
              <div key={cur._id}>
                <h1>{cur.title}</h1>
                <p>{cur.description}</p>
                <button
                  onClick={() => {
                    deletproject(cur._id);
                  }}
                >
                  Delete
                </button>
              </div>
            );
          })}
      </div>
    </>
  );
};

export default Getprojects;

When I try to access the state from Getprojects component, its value is undefined. But inside a reducer if I, console am getting an array of object. In any other component, the state is undefined. Any idea???

Reducer functions are synchronous, they can't use asynchronous code. What is `projectget`? — Drew Reese, Aug 22 '21 at 07:21

score 0 · Accepted Answer · answered Aug 22 '21 at 07:49

If you want to handle asyn logic in your application by using redux, you should pick one of Async Redux Middleware packages

redux-thunk (more easiest to config and good for small projects)
redux-saga
redux-observable etc.

Or you can just use useEffect and dispatch only result actions to it. For example:

  useEffect(() => {
    dispatch(getProjectActionStart());
    projectget()
      .then((result) => {
        console.log(result);
        // state = [ ...result]
        state = result;
        console.log(state);

        dispatch(getProjectActionStart(state));
        return state;
      })
      .catch(() => {
        dispatch(getProjectActionFailed());
      });
  }, []);

Usereducer state is alway undefined when used with useContext

1 Answers1