Using React and Redux Hooks, why is my action not firing?

useeffect
react hooks vs redux
redux-saga hooks
react hooks, redux tutorial
how to use useselector in react-redux
useselector vs mapstatetoprops
react-redux does not contain an export named useselector
react-redux hooks file structure

Edit: SOLVED! Please see below.

I want my Blog component to fire the fetchBlog action creator every time the browser requests its URL, be it via a link or a refresh. I'd like to do it with the React useEffect Hook and with the React-Redux useDispatch and useSelector Hooks. However, my action only fires when following the link to the page; I do not understand why, even after reading several explanations (like the official docs).

Here is the code:

// Everything duly imported, or else VSC would yell at me

export default function Blog() {
  const dispatch = useDispatch();
    // slug is set here with useSelector, this always works
  useEffect(() => {
    dispatch(fetchBlog(slug))
  }, [slug, dispatch]);
  const blog = useSelector((state) => state.blogs[0]);
    // return renders the blog information from the blog constant
    // since the action does not fire, blog is undefined because state.blogs is an empty array
}

I know that, on refresh, fetchBlog does not fire because of Redux DevTools and also because I put a debugger there. (And the back-end logs don't show the request coming in.) The action creator itself and the reducer must be working; if they weren't, the page would not load correctly when visited through a link.

Edit: I have determined useSelector and useDispatch are not the root cause of the problem, as changing the code to use connect with mapStateToProps and mapDispatchToProps gives the same result. The issue seems to be with useEffect.

Hooks � React Redux, The selector will be called with the entire Redux store state as its only argument. cached result can be returned by the hook without re-running the selector). When an action is dispatched, useSelector() will do a reference� Since the React hooks API was introduced, a lot of questions have risen about whether or not React hooks will replace Redux. In my view, there is little overlap between hooks and Redux. Hooks didn

I think the problem is you are returning the call to dispatch. Functions returned from useEffect are clean up functions, so I don't think this would run on mount, or update - only before unmount. Try this:

export default function Blog() {
  // ...
  // Don't return from useEffect. Just call dispatch within the body.
  useEffect(() => {
    dispatch(fetchBlog(slug);
  }, [slug, dispatch]);
  // ...

}

https://reactjs.org/docs/hooks-reference.html#cleaning-up-an-effect

How To Not Have A Mess with React Hooks & Redux, Before React Redux added the hooks api, usually a component would have to be connected to Redux and “define” props and actions using the� I'm trying to filter my data to show with my reducers and works in the first render. However, when I try to change the page with the pagination get this error: × Too many re-renders. React lim

I'd like to clarify what the issue was, which @Trace guided me to finding.

useEffect wasn't being called on refresh because it gets called after the component renders/returns. When refreshing, the state - including the blog data - is lost; instead of returning, a TypeError is thrown because data.title doesn't exist. So useEffect never gets the chance of being called and fetch the blog's content.

The solution to that goes like this:

export default function Blog() {
  // ...
  useEffect(/* ... */)
  const blog = useSelector((state) => state.blogs[0]);
  if (!blog) {
    return <p>Loading...</p>
  }
  // return actual blog contents here
}  

So now fetchBlog does get called, updating blog and rendering the content.

Using Redux with React Hooks, I like this change, as binding action creators can be a little confusing to newcomers to React Redux. Now, with the new React Redux Hooks instead of connect : Another benefit of not using the higher-order component is that you no useSelector is returning a different object literal each time it's called. React Redux recently released version 7.1, which includes long awaited support for React Hooks.This means that you can now ditch the connect higher-order component and use Redux with Hooks in your function components.

Use Hooks + Context, not React + Redux, Use Hooks And Context, Not React And Redux They take the current application state, perform an action, and then return a new state: external libraries or add a bunch of files and folders in order to get our app working. Ever since the introduction of hooks, using React's Context API has become really simple. If you were Tagged with react, typescript, redux, javascript.

React-Redux Hooks: useSelector and useDispatch, A guide to using Redux with React hooks for cleaner code. is necessary in the event that an action type is called that does not exist to prevent� With this our redux setup is complete, we can now access the redux store from the functional components using react hooks. useSelector hook (accessing state) The useSelector hook is similar to mapStatetoprops by using this hook we can access the entire redux store state. The useSelector hook will also subscribe to the redux store.

React-Redux Hooks, React-Redux Hooks is an alternative to the existing connect() higher-order component. mapStateToProps : called every time the store state changes. Redux store and dispatch actions, without having to wrap your components in connect()� Redux and React-redux Hooks way simple state management example using create-react-app #reactHooks #react-redux #useDispatch Help the channel via patron and buying merchandise * https://www

Comments
  • Is the component unmounted, maybe that's the reason it doesn't fire afterwards?
  • I don't think it is unmounted, as I still get an error: the action doesn't fire, so state.blogs is an empty array, so data is undefined, so reading blog.title in the JSX part throws a TypeError: Cannot read property 'title' of undefined. But I'm not very confident in this - how can I be 100% positive the component is unmounted? What could unmount it?
  • I think the problem with that is that the component may not always unmount before mounting again with a new slug. So op would want to keep the second argument of use effect as is.
  • @pizza-r0b I don't know why you speak of unmount, as the user clearly speaks about a refresh of the page, which means all components are reloaded.
  • "be it via a link or a refresh"
  • "However, my action only fires when following the link to the page" + "I know that, on refresh, fetchBlog does not fire"
  • Thank you for your input! I do know that the slug is okay, I can log it and it shows up okay. I changed the code so that the callback passed to useEffect both calls fetchBlog and returns the same call. That way, the return value would be called on unmounting. This does not solve the issue. I also removed the slug from the deps array, as well as removing the array itself, and all that got me was a warning that they were missing.
  • You're correct that I shouldn't be returning from within useEffect, thank you. Unfortunately, that still does not solve the issue - useEffect itself is not being triggered on refresh. Even so, I appreciate your input.
  • @brunoparga Try running it with an empty array, even if it still doesn't work, you can exclude the possibility that the problem lies with the parameters that are passed via the useEffect array.
  • That gives me Line 12:6: React Hook useEffect has missing dependencies: 'dispatch' and 'slug'. Either include them or remove the dependency array react-hooks/exhaustive-deps on the console.
  • @brunoparga sorry I think there was an extra parenthesis. Can you post the updated code?
  • Unfortunately I would need more code to assist you. If you have a repo I can look at I can probably help debug.