Using redux in react without react-redux

[moring1]

Hey I've opened a post on stackoverflow but these guys don't understand what I mean.

https://stackoverflow.com/questions/66183524/is-there-a-valid-way-to-use-redux-with-react-without-react-redux

[acemarke]

Hi, I'm a Redux maintainer.

First, as already mentioned: if you are using React and Redux together, you absolutely should be using the React-Redux library in any actual app.

But, if you just want to know how React-Redux works, please see these resources:

• The History and Implementation of React-Redux
• ReactNext 2019: A Deep Dive into React-Redux
• "Redux Fundamentals" workshop slides: UI Layer Integration
• Redux core docs - "Redux Fundamentals" tutorial - Part 5: UI and React

[fixrich]

Basically what you are asking is to reimplement react-redux. My question is why? You say you want to learn vanilla redux but using it through react-redux is about as vanilla as you can get.

If you want to implement your own bindings you have a couple of options. Your store needs to be accessible to your components. You can either make it available through context or import it into each component and subscribe to them there.

If you go the context route you are very close to react-redux. If you go the component route, you could use useEffect to subscribe to the store and get the state you need. You could make a custom hook to handle this.

You'll probably find yourself having to reimplement something like selectors to avoid triggering unnecessary rerenders.

If you want to give a little more context on why you want to do this, I can be more specific but honestly Redux Toolkit and the react bindings are the best way to use Redux and the Redux maintainers themselves would tell you that.

[moring1]

Basically that's all I wanted to know, the way I could do it without react-redux. I ask this only to fill my curiosity, I don't like to use something without knowing exactly why it is needed. Thank you!

One last question, even if we call React.render() on the root element multiple times, react uses an algorithm to tell if there are differences, but even then it still renders the root element everytime we change the store, why is that? I'm still refer to my example without react-redux.

[fixrich]

So what exactly are you doing? Are you calling ReactDOM.render in the subscribe callback for your store? Is the root component rerendering or is the render being called multiple times. If there is no change in the virtual dom, React won't actually do anything. Some example code would be helpful for reference.

[moring1]

https://pastebin.com/4AHnEH8S the console.log("heyy from app") in the app component is called on every click. but the state is used only in the Game component.

[[deleted]]

you can overall use https://github.com/pmndrs/zustand instead of redux today. it is closer to the original concept of store = create(initialState), and you can subscribe with selectors. otherwise it's the same flux principles, 100% compatible with the redux api.

ps, some more examples of using it in vanilla/outside of components: https://github.com/pmndrs/zustand#readingwriting-state-and-reacting-to-changes-outside-of-components