Adding array to redux store, but it's only taking the original state of the array items

Question

I am working on 2 pages on an app using React and Redux. On the first page, you enter a string, it displays the string in reverse and tells you whether or not it is a palindrome. Once a string is submitted, it is added to the redux store. On the second page, it displays a list of entered strings, their reversed counterparts and, if it was a palindrome, a badge labeled P shows.

The original string displays on the second page as it is supposed to. However, the reversed string and the palindrome badge are only showing their original state.

I used console.log to see what the values of the array sent to the store were, and the second two items are not updating. For instance, when I entered the string "Hello there", the array added to the store should have been {originalString: 'Hello There', reversedString: 'erehT olleH', isPalindrome: false}. Instead I'm getting {originalString: 'Hello There', reversedString: '', isPalindrome: true}

Here is the code for the first page:

import React, { useState } from "react";
import { useFormik } from "formik";
import { useDispatch } from "react-redux";
import { addStringResult } from "../../redux/reverseStringSlice";

export const ReverseString = () => {
  /**
   * Hooks
   */
  const [string, setString] = useState("");
  const [reverseString, setReverseString] = useState("");
  const [inputClass, setInputClass] = useState("form-control");
  const [isButtonDisabled, setButtonDisabled] = useState(true);
  const [isChecked, setIsChecked] = useState(false);
  const [isHiddenYes, setIsHiddenYes] = useState(true);
  const [isHiddenNo, setIsHiddenNo] = useState(true);
  const dispatch = useDispatch();

  const validate = () => {
    const errors = {};

    if (string.length < 1) {
      errors.string = "An original string is required";
      setInputClass("form-control is-invalid");
    }

    return errors;
  };

  /**
   * Javascript Code
   */

  const formik = useFormik({
    initialValues: {},
    validate,
    onSubmit: () => {
      let reverseArray = [...string];
      reverseArray.reverse();
      let newArray = reverseArray.join("");
      setReverseString(newArray);
      setButtonDisabled(false);
      setInputClass("form-control");
      if (
        isChecked === true &&
        string.length > 0 &&
        string.replace(/ /g, "").toLowerCase() ===
          string.replace(/ /g, "").toLowerCase().split("").reverse().join("")
      ) {
        setIsHiddenYes(false);
        setIsHiddenNo(true);
      } else if (isChecked === true && string.length > 0) {
        setIsHiddenNo(false);
        setIsHiddenYes(true);
      }
      dispatch(
        addStringResult({
          originalString: string,
          reversedString: reverseString,
          isPalindrome: isHiddenNo,
        })
      );
    },
  });

  const clearAll = () => {
    setString("");
    setReverseString("");
    setInputClass("form-control");
    setButtonDisabled(true);
    setIsChecked(false);
    setIsHiddenYes(true);
    setIsHiddenNo(true);
  };
  /**
   * HTML Code (JSX)
   */
  return (
    <form onSubmit={formik.handleSubmit}>
      <div>
        <label htmlFor="reverseString" className="form-label">
          <h1>Reverse String</h1>
        </label>
      </div>
      <div className="input-group input-group-lg mb-1 has-validation">
        <span className="input-group-text" id="originalStringAddOn">
          Original String
        </span>
        <input
          type="text"
          className={inputClass}
          id="string"
          value={string}
          onChange={(e) => setString(e.target.value)}
        />
        <div className="invalid-feedback">{formik.errors.string}</div>
      </div>
      <div className="input-group input-group-lg mb-2">
        <span className="input-group-text" id="reverseStringAddOn">
          Reversed String
        </span>
        <input
          type="text"
          className="form-control"
          id="reverseString"
          value={reverseString}
          onChange={(e) => setReverseString(e.target.value)}
          readOnly
        />
      </div>
      <div className="form-check">
        <input
          className="form-check-input"
          type="checkbox"
          value=""
          id="palindromeCheckBox"
          checked={isChecked}
          onChange={() => setIsChecked((prev) => !prev)}
        />
        <label className="form-check-label" htmlFor="palindromeCheckBox">
          Is the Original String a palindrome?
        </label>
      </div>
      <div
        className="alert alert-primary"
        role="alert"
        id="alertYes"
        hidden={isHiddenYes}
      >
        Yes the original string of {string} is a palindrome.
      </div>
      <div
        className="alert alert-danger"
        role="alert"
        id="alertNo"
        hidden={isHiddenNo}
      >
        No, the original string of {string} is not a palindrome.
      </div>
      <div>
        <button className="btn btn-primary" type="submit">
          Display
        </button>{" "}
        <button
          className="btn btn-danger"
          onClick={clearAll}
          disabled={isButtonDisabled}
        >
          Clear
        </button>
      </div>
    </form>
  );
};

This is the code for the second page:

import React from "react";
import { StringResult } from "../StringResult/StringResult";
import { selectStringResults } from "../../redux/reverseStringSlice";
import { useSelector } from "react-redux";

export const ReverseStringResults = () => {
  const stringResults = useSelector(selectStringResults);
console.log(stringResults)
  return (
    <div>
      <h1>Reverse String Results</h1>
      <ol className="list-group list-group-numbered">
        {stringResults.map((stringResult) => {
          return (
            <StringResult
              key={stringResult.originalString}
              stringResult={stringResult}
            />
          );
        })}
      </ol>
    </div>
  );
};

This is the code for the redux slice

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  stringResults: [
    {
      originalString: "Hello World",
      reversedString: "dlroW olleH",
      isPalindrome: false,
    },
    {
      originalString: "kayak",
      reversedString: "kayak",
      isPalindrome: true,
    },
    {
      originalString: "my gym",
      reversedString: "myg ym",
      isPalindrome: true,
    },
    {
      originalString: "Love React",
      reversedString: "tcaeR evoL",
      isPalindrome: false,
    },
    {
      originalString: "mom",
      reversedString: "mom",
      isPalindrome: true,
    },
  ],
};

export const reverseStringSlice = createSlice({
  name: "stringResults",
  initialState,
  reducers: {
    addStringResult: (state, action) => {
      return {
        ...state,
        stringResults: [
          ...state.stringResults,
          {
            originalString: action.payload.originalString,
            reversedString: action.payload.reversedString,
            isPalindrome: action.payload.isPalindrome,
          },
        ],
      };
    },
  },
});

export const { addStringResult } = reverseStringSlice.actions;
export const selectStringResults = (state) => state.stringResults.stringResults;

export default reverseStringSlice.reducer;

I can not figure out why the string is working properly but the other two are not. Any help is appreciated!

Answer 1

Issue

The issue here is that enqueued React state updates are not immediately processed. The reverseString and isHiddenNo values updated in the form's submit handler are a stale closure over the unupdated reverseString and isHiddenNo state, the stale/outdated values are dispatched to the store.

Solution

Compute the reversed string value and if the string is a palindrome within the submit handler, and use these computed values when dispatching to the store.

const formik = useFormik({
  initialValues: {},
  validate,
  onSubmit: () => {
    const reversedString = string.split("").toReversed().join("");
    const isPalindrome =
      string.replace(/ /g, "").toLowerCase() ===
      reversedString.replace(/ /g, "").toLowerCase();

    setReverseString(reversedString);
    setButtonDisabled(false);
    setInputClass("form-control");

    if (isChecked && string.length) {
      setIsHiddenYes(!isPalindrome);
      setIsHiddenNo(isPalindrome);
    }

    dispatch(
      addStringResult({
        originalString: string,
        reversedString,
        isPalindrome
      })
    );
  }
});