CODEWITHSUNDEEP
reactjsreduxstate-managementreact-hooks
Nurbol Alpysbayev
Nurbol Alpysbayev

Reputation: 21881

React hooks: are they useful for shared state management, like e.g. Redux?

There is a hype about React hooks. Too much information and I still don't know: does the advent of hooks mean that libs like Redux can be thrown to garbage?

So far, what I understood is hooks are good for stateful functional components, what about shared state?

Upvotes: 7

Views: 6713

Answers (5)

Daniel
Daniel

Reputation: 15413

Hooks and Context are not for managing application state in lieu of Redux.

Context is more akin to props in that it solves the nightmare that can become of communicating information from a parent to a child in large, heavily nested enterprise level applications. The downside is that Context is a bit more complex and setting it up can be painful.

Hooks just allow us to use functional components that can now hook into application state without having to turn them into class-based components.

The confusion lies in that you can grab functionality from Redux with a hook like useReducer without the traditional Redux setup.

So like if you were working on a blog application and you wanted to add functionality to update your blogposts, you can apply useReducer like so:

const blogReducer = (state, action) => {
  switch (action.type) {
    case 'add_blogpost':
      return [...state, { title: `Blog Post #${state.length + 1}` }];
    default:
      return state;
  }
};

So that would be your reducer which you would then apply like so:

export const BlogProvider = ({ children }) => {
  const [blogPosts, dispatch] = useReducer(blogReducer, []);

You can temporarily create a helper function to dispatch an action object:

const addBlogPost = () => {
    dispatch({ type: 'add_blogpost' });
  };

You would have to add it to your value prop, the 'add_blogpost'. Anyway, it's just a confusing way of utilizing aspects of Redux on a functional component without using the whole Redux system itself, but again, not a replacement.

Upvotes: 0

Pooya Sabramooz
Pooya Sabramooz

Reputation: 342

Attention please, Redux is just state management. Not a react library. You can use Redux in any project that you want.

In the future, maybe the redux connector (react-redux) will be killed or unused by hooks but the Redux itself it's an awesome library because it brings the order inside an application that has to handle a lot of data and develop by tons of developers.

There may be more use cases where Redux isn't necessary, but no, neither Hooks nor context will "kill" Redux.

I use Redux inside an enterprise application that, before, was a mess there was no source of truth. Redux put order inside the codebase and the logic.

Upvotes: 0

Yangshun Tay
Yangshun Tay

Reputation: 53159

No, hooks don't totally eliminate the need for Redux. Hooks are mainly as an alternative to implement features that we have to use classes for today:

  1. Local component state
  2. Context
  3. Lifecycle methods and side effects

Other than the above, hooks also provide an easier way to share stateful logic between components.

What is more likely to kill/replace Redux is context instead of hooks, which is a way to share state across components. But IMO context isn't as powerful as Redux stores as there are other features that Redux offers besides a shared state store such as middlewares and a specialized devtool with time-travelling capabilites. There's also a whole learning and tooling ecosystem built around Redux that context doesn't have at the moment as far as I know.

If you use the useReducer hook in conjunction with context like in this example, it'd be very similar to using Redux and for small apps (like a TodoMVC), it might be sufficient. For large apps I don't think just one context and useReducer will be sufficient. You might need multiple of them, and that's where using Redux and composing stores would make sense. You could also combine multiple contexts and useReducer hooks but it might be cleaner to just use Redux.

Upvotes: 13

xeiton
xeiton

Reputation: 1840

No, Hooks won't replace Redux, but they can help you write cleaner code, and you won't need to write class components just to use local state or lifecycle methods. That is a great use case right there.

In the past you had to use Redux to make sure a state is persistent between each re-render of the component. But now you can just use useState() method to implement a persistent local state! You can use useEffect() instead of React lifecycle methods, and you can use useReducer to write quick action creator methods and access a global state!!

Here is a good article about how to use useReducer() method.

Upvotes: 2

maxadorable
maxadorable

Reputation: 1284

Yes but it looks like its still not an official feature. It's still in feature proposal. stage. Many people thought react context would dump redux into the garbage but it turns out it didn't.

Upvotes: 1

Related Questions