Why is reducer not updating states in React?!

 The problem:

Updating the state with useReducer doesn't update state. Look at the code below:

  const quizReducer = async (state, action) => {
    switch (action.type) {
      case POPULATE:
        return { ...state, questions: action.payload, ready: true };
    }
  };
  const [{ questions, ready }, dispatch] = useReducer(quizReducer, intialState);

  useEffect(() => {
    if (controller.current !== null) return console.log("Hello");
    controller.current = new AbortController();
    fetch(`http://localhost:3000/api/v1/bootcamps`)
      .then((res) => res.json())
      .then((result) => {
        const data = result.data;
        dispatch({ type: POPULATE, payload: data });
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

Spot the problem? Here is what I tried to do:

  • Initially I thought it's the problem of the API itself, so I tried logging the data. But to no avail.
  • I thought useEffect running twice has to do with it not being able to return the data properly, but nope. 

But the solution is to simply declare the reducer is synchronous, instead of asynchronous.

So just remove the 'async' from the 'quizReducer' like this:

  const quizReducer = async (state, action) => {
    switch (action.type) {
      case POPULATE:
        return { ...state, questions: action.payload, ready: true };
    }
  };
  const [{ questions, ready }, dispatch] = useReducer(quizReducer, intialState);

  useEffect(() => {
    if (controller.current !== null) return console.log("Hello");
    controller.current = new AbortController();
    fetch(`http://localhost:3000/api/v1/bootcamps`)
      .then((res) => res.json())
      .then((result) => {
        const data = result.data;
        dispatch({ type: POPULATE, payload: data });
      })
      .catch((error) => {
        console.error(error);
      });
  }, []);

Comments

Post a Comment

Popular posts from this blog

Support for the experimental syntax 'decorators' isn't currently enabled (5:3):

This guide is targeted specifically to people who encountered this error while using MobX with ReactJS Error Now I know, its frustrating when you got this error, no worries, I know exactly what caused the error. Here was my code that caused the error: // store.js import { observable , action } from 'mobx' ; class ProductStore {   @ observable products = [];   @ action   addProduct ( product ) {     this . products . push ( product );   } } const store = new ProductStore (); export default store ; Solutions tried You might see this message in your console: "Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation." and you might have added this new dependencies in both .babelrc [source] , babel.config.json [source] , installing the dependencies in dev using npm [source] , installing it as regular dependency [s...
Read more

How to add environment variables into Heroku container

Image
 Method 1: Using .env file  NOTE: Please add your .env file into .gitignore to not make the file visiblein github. Before we start, please make sure you have ran ' heroku scale worker=1 -a (app) ' in your app.  1) Create an .env file and add your environment variable like so: your-environment-variable=123 2) In your code, import load_dotenv from dotenv like so: import os from dotenv import load_dotenv load_dotenv() test-env = os.getenv('your-environment-variable')  print(test-env)  Note: Please make sure you have requirements.txt present by doing 'pip freeze > requirements.txt' 3) Create your dockerfile FROM python:latest WORKDIR / COPY . . RUN pip install -r requirements.txt CMD [ "python", "test.py" ] 4) Run ' heroku container:push worker -a (app name) ' 5) Run ' heroku container:release worker -a (app name) ' 6) Wait for 10-20 seconds... 7) You can test if your app is working by running ' heroku logs -a (app name)...
Read more

Running CQL scripts in Cassandra

How to run CQL scripts in Cassandra  There are 2 ways to run a CQL script, the first way would be running the following command: - cqlsh -f {directory} The second way would be using the command within the CQLSH terminal: - source '{directory}' Where does the {directory} points to? The directory points to the root of your server. For example, if you are on linux, the root would be `/`. Therefore, if you placed your scripts under the folder `scripts`, your directory would look like this `/scripts/{cql_script_name}.cql`.  I've been running the command, but it keeps saying `No such file or directory`? If you met this error, please make sure that:      - The file actually exist in the directory. You can check if by typing `ls -l {directory}`. If it doesn't exist, it will show the same error. If you are on docker, and you are unsure of how to mount your CQL file into your container, you can check out this guide.      - The CQL file has the correct exten...
Read more