title: redux store not found and not able to render a component for a specific path in React
body: <p>I am implementing a password reset functionality in a MERN app. When a user enters the email address for which they want to reset the password, they get a rest password link in their mail. Now, when they visit that link, they should see the PasswordResetFormSecond component rendered on the screen. (irrespective of whether the token is valid or not).</p>
  <p>However, when I am visiting the path &quot;/account/reset/:token&quot;, I don't see the PasswordResetFormSecond being rendered on the screen. I get the correct server responses however. Also, the redux store is not found.
  <a href="https://i.stack.imgur.com/xoeAL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xoeAL.jpg" alt="enter image description here" /></a>
  What am I doing wrong?</p>
  <p>Code snippets are given below:</p>
  <p>client/src/components/PasswordResetFormsecond.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import { useSelector, useDispatch } from &quot;react-redux&quot;;
  import { useFormik } from &quot;formik&quot;;
  import * as Yup from &quot;yup&quot;;
  import {
    fetchPasswordResetMount,
    fetchPasswordResetSubmit,
  } from &quot;./stateSlices/passwordResetPasswordSlice&quot;;
  
  const PasswordResetFormSecond = ({ history, match }) =&gt; {
    const { successMount, errorMount, successSubmit, errorSubmit } = useSelector(
      (state) =&gt; state.passwordResetPasswordStage
    );
  
    const dispatch = useDispatch();
  
    useState(() =&gt; {
      dispatch(fetchPasswordResetMount(match.params.token));
    }, []);
  
    const formik = useFormik({
      initialValues: {
        password: &quot;&quot;,
        confirmPassword: &quot;&quot;,
      },
      validationSchema: Yup.object({
        password: Yup.string().required(&quot;Please enter your password&quot;),
        confirmPassword: Yup.string().required(&quot;Please enter your password&quot;),
      }),
      onSubmit: async (values, { resetForm }) =&gt; {
        const { password, confirmPassword } = values;
        dispatch(
          fetchPasswordResetSubmit({
            password,
            confirmPassword,
            token: match.params.token,
          })
        );
        if (successSubmit) {
          history.push(&quot;/registerLogin&quot;);
        }
      },
    });
  
    let condition = successMount || errorMount;
  
    return (
      &lt;div className=&quot;col-10 col-sm-8 col-md-5 mx-auto&quot;&gt;
        {condition &amp;&amp; (
          &lt;div className=&quot;login-form-wrapper&quot;&gt;
            &lt;div className=&quot;col-10 col-sm-8 col-md-5 mx-auto&quot;&gt;
              &lt;h1 className=&quot;font-weight-bold&quot;&gt;Reset Password&lt;/h1&gt;
            &lt;/div&gt;
            &lt;form onSubmit={formik.handleSubmit}&gt;
              &lt;div className=&quot;form-group col-10 col-sm-8 col-md-5 mx-auto mt-5&quot;&gt;
                {errorSubmit &amp;&amp; (
                  &lt;div className=&quot;alert alert-danger&quot; role=&quot;alert&quot;&gt;
                    {errorSubmit}
                  &lt;/div&gt;
                )}
              &lt;/div&gt;
              &lt;div className=&quot;form-group col-10 col-sm-8 col-md-5 mx-auto&quot;&gt;
                &lt;label htmlFor=&quot;password&quot;&gt;Password&lt;/label&gt;
                &lt;input
                  className=&quot;form-control form-control-lg&quot;
                  id=&quot;password&quot;
                  name=&quot;password&quot;
                  type=&quot;password&quot;
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  value={formik.values.password}
                /&gt;
                {formik.touched.password &amp;&amp; formik.errors.password ? (
                  &lt;small className=&quot;form-text text-danger&quot;&gt;
                    {formik.errors.password}
                  &lt;/small&gt;
                ) : null}
              &lt;/div&gt;
              &lt;div className=&quot;form-group col-10 col-sm-8 col-md-5 mx-auto&quot;&gt;
                &lt;label htmlFor=&quot;confirmPassword&quot;&gt;Confirm Password&lt;/label&gt;
                &lt;input
                  className=&quot;form-control form-control-lg&quot;
                  id=&quot;confirmPassword&quot;
                  name=&quot;confirmPassword&quot;
                  type=&quot;password&quot;
                  onChange={formik.handleChange}
                  onBlur={formik.handleBlur}
                  value={formik.values.password}
                /&gt;
                {formik.touched.confirmPassword &amp;&amp;
                formik.errors.confirmPassword ? (
                  &lt;small className=&quot;form-text text-danger&quot;&gt;
                    {formik.errors.confirmPassword}
                  &lt;/small&gt;
                ) : null}
              &lt;/div&gt;
  
              &lt;div className=&quot;col-10 col-sm-8 col-md-5 mx-auto&quot;&gt;
                &lt;button
                  type=&quot;submit&quot;
                  className=&quot;btn btn-lg btn-primary btn-block login-button&quot;
                &gt;
                  Reset Password
                &lt;/button&gt;
              &lt;/div&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default PasswordResetFormSecond;
  
  </code></pre>
  <p>client/src/App.js</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
  import Header from &quot;./components/Header&quot;;
  import Home from &quot;./components/Home&quot;;
  import About from &quot;./components/About&quot;;
  import CV from &quot;./components/CV&quot;;
  import Projects from &quot;./components/Projects&quot;;
  import RegisterForm from &quot;./components/RegisterForm&quot;;
  import LoginForm from &quot;./components/LoginForm&quot;;
  import PasswordResetFormFirst from &quot;./components/PasswordResetFormFirst&quot;;
  import PasswordResetFormSecond from &quot;./components/PasswordResetFormSecond&quot;;
  import { Route, Switch } from &quot;react-router-dom&quot;;
  
  const App = () =&gt; {
    const [menuOpen, setMenuOpen] = useState(false);
    const handleMenuClick = () =&gt; {
      setMenuOpen(!menuOpen);
    };
  
    const handleOverlayClick = () =&gt; {
      setMenuOpen(!menuOpen);
    };
  
    const handleSidedrawerNavbarLinkClick = () =&gt; {
      setMenuOpen(!menuOpen);
    };
    return (
      &lt;&gt;
        &lt;Header
          menuOpen={menuOpen}
          onMenuClick={handleMenuClick}
          onSidedrawerNavbarLinkClick={handleSidedrawerNavbarLinkClick}
          onOverlayClick={handleOverlayClick}
        /&gt;
        &lt;Switch&gt;
          &lt;Route
            path=&quot;/account/reset/:token&quot;
            component={PasswordResetFormSecond}
          /&gt;
          &lt;Route path=&quot;/account/forgot&quot; component={PasswordResetFormFirst} /&gt;
          &lt;Route path=&quot;/about&quot; component={About} /&gt;
          &lt;Route path=&quot;/cv&quot; component={CV} /&gt;
          &lt;Route path=&quot;/projects&quot; component={Projects} /&gt;
          &lt;Route path=&quot;/registerLogin&quot; component={LoginForm} /&gt;
          &lt;Route path=&quot;/register&quot; component={RegisterForm} /&gt;
          &lt;Route path=&quot;/&quot; exact component={Home} /&gt;
        &lt;/Switch&gt;
      &lt;/&gt;
    );
  };
  
  export default App;
  
  </code></pre>
  <p>client/src/staeSlices/passwordResetPasswordSlice.js</p>
  <pre><code>import { createSlice, createAsyncThunk } from &quot;@reduxjs/toolkit&quot;;
  import axios from &quot;axios&quot;;
  
  const initialState = {
    user: null,
    successMount: null,
    successSubmit: null,
    errorMount: null,
    updatedUser: null,
    errorSubmit: null,
  };
  
  export const fetchPasswordResetMount = createAsyncThunk(
    &quot;passwordReset/fetchPasswordResetMount&quot;,
    async (token, { rejectWithValue }) =&gt; {
      try {
        const { data } = await axios.get(`/account/reset/${token}`);
        return data;
      } catch (err) {
        return rejectWithValue(err.response.data);
      }
    }
  );
  export const fetchPasswordResetSubmit = createAsyncThunk(
    &quot;passwordResetPassword/fetchPasswordResetInfo&quot;,
    async ({ password, confirmPassword, token }, { rejectWithValue }) =&gt; {
      try {
        const { data } = await axios.post(`/account/reset/${token}`, {
          password,
          confirmPassword,
        });
        return data;
      } catch (err) {
        return rejectWithValue(err.response.data);
      }
    }
  );
  
  export const passwordResetSlice = createSlice({
    name: &quot;passwordReset&quot;,
    initialState,
    reducers: {},
    extraReducers: {
      [fetchPasswordResetMount.fulfilled]: (state, action) =&gt; {
        state.user = action.payload;
        state.successMount = true;
      },
      [fetchPasswordResetMount.rejected]: (state, action) =&gt; {
        state.errorMount = action.payload.message;
      },
      [fetchPasswordResetSubmit.fulfilled]: (state, action) =&gt; {
        state.updatedUser = action.payload;
        state.successSubmit = true;
      },
      [fetchPasswordResetSubmit.rejected]: (state, action) =&gt; {
        state.errorSubmit = action.payload.message;
      },
    },
  });
  
  export default passwordResetSlice.reducer;
  
  </code></pre>
  <p>server/routes/passwordResetRoutes.js</p>
  <pre><code>const express = require(&quot;express&quot;);
  const crypto = require(&quot;crypto&quot;);
  const asyncHandler = require(&quot;express-async-handler&quot;);
  const User = require(&quot;../models/userModel&quot;);
  
  const router = express.Router();
  
  router.get(
    &quot;/reset/:token&quot;,
    asyncHandler(async (req, res, next) =&gt; {
      const user = await User.findOne({
        passwordResetToken: req.params.token,
        passwordResetExpires: { $gt: Date.now() },
      });
  
      if (user) {
        res.json(user);
      } else {
        const err = new Error(&quot;Password reset token is invalid or has expired&quot;);
        err.status = 404;
        next(err);
      }
    })
  );
  router.post(
    &quot;/reset/:token&quot;,
    asyncHandler(async (req, res, next) =&gt; {
      if (req.body.password === req.body.confirmPassword) {
        next();
      } else {
        const err = new Error(&quot;Passwords don't match.&quot;);
        err.status = 404;
        next(err);
      }
      const user = await User.findOne({
        passwordResetToken: req.params.token,
        passwordResetExpires: { $gt: Date.now() },
      });
  
      if (user) {
        user.password = req.body.password;
        user.passwordResetToken = undefined;
        user.passwordResetExpires = undefined;
        const updatedUser = await user.save();
        res.json(updatedUser);
      } else {
        const err = new Error(&quot;Password reset token is invalid or has expired&quot;);
        err.status = 404;
        next(err);
      }
    })
  );
  router.post(
    &quot;/forgot&quot;,
    asyncHandler(async (req, res, next) =&gt; {
      const user = await User.findOne({ email: req.body.email });
  
      if (user) {
        user.passwordResetToken = crypto.randomBytes(20).toString(&quot;hex&quot;);
        user.passwordResetExpires = Date.now() + 3600000;
        await user.save();
  
        res.json({
          message: &quot;You have been emailed a password reset link&quot;,
        });
      } else {
        const err = new Error(&quot;No account with that email exists&quot;);
        err.status = 404;
        next(err);
      }
    })
  );
  
  module.exports = router;
  
  </code></pre>
  <p>store.js</p>
  <pre><code>import { configureStore } from &quot;@reduxjs/toolkit&quot;;
  import loginReducer from &quot;./components/stateSlices/loginSlice&quot;;
  import registerReducer from &quot;./components/stateSlices/registerSlice&quot;;
  import passwordResetEmailReducer from &quot;./components/stateSlices/passwordResetEmailSlice&quot;;
  import passwordResetPasswordReducer from &quot;./components/stateSlices/passwordResetPasswordSlice&quot;;
  
  const loggedInUserFromStorage = localStorage.getItem(&quot;loggedInUser&quot;)
    ? JSON.parse(localStorage.getItem(&quot;loggedInUser&quot;))
    : null;
  
  const preloadedState = {
    login: {
      user: loggedInUserFromStorage,
    },
  };
  
  export default configureStore({
    reducer: {
      login: loginReducer,
      register: registerReducer,
      passwordResetEmail: passwordResetEmailReducer,
      passwordResetPassword: passwordResetPasswordReducer,
    },
    preloadedState,
  });
  </code></pre>
  <p>GITHUB REPO: <a href="https://github.com/sundaray/password-reset" rel="nofollow noreferrer">https://github.com/sundaray/password-reset</a></p>