Using React Hooks for global Redux stores

栏目: IT技术 · 发布时间: 4年前

内容简介:When hooks came out there were various articles suggesting Redux might no longer be needed, and ripostes like these which argue (rightly) thatThen as a counter-counter argument some suggested usingHowever this method has a significant drawback to performan

When hooks came out there were various articles suggesting Redux might no longer be needed, and ripostes like these which argue (rightly) that useReducer is not a replacement of Redux as it’s cumbersome for a global store:

Then as a counter-counter argument some suggested using React Context as a solution to share the state and dispatcher throughout the app:

However this method has a significant drawback to performance — as per Caveats in the React docs, whenever a new object reference is passed into <Provider value={..}> , all consumers will be re-rendered. This is different to react-redux’s connect() function which will re-render the component when the parts of the state you’re interested in change.

Today I needed a global store when using Gatsby as it completely unmounts the React tree on navigation changes, thus losing any state created by components. Unfortunately their solution for this, at least by itself, remains awkward for passing state down to deeper components and dispatches back up.

Making a global redux store with hooks

It turns out making a store with hooks is quite simple. It consists of two components:

1. The class which holds store state (redux does this with a function called createStore() but same difference)

2. A hook to receive parts of the store the component is interested in, as well as the dispatch function to make updates

Let’s look at the class first:

Simple right? How we use this will become apparent when we put it into practice. You might notice we even dispatch actions to Redux Devtools :)

Once we’ve created our store we need to be able to access it in any component, that’s where the hook comes in:

The hook:

1. Takes a part of the existing store state and assigns it to state

2. On mount adds a listener for store changes, and on unmount removes it

3. When the state changes it checks if the part that we’re interested in has changed. If it has then we update our state with `setState` which causes the component to re-render.

And finally the app code

Let’s look at a scenario where we want a light and dark theme.

Great we’ve created our store and reducer. Now let’s look at how we can use the hook to access the theme and change it.

And all that running together:

We can tersely access parts of any global store anywhere in the app and our component will only re-render if those parts of the store changed :tada:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

禅与摩托车维修艺术

禅与摩托车维修艺术

(美)罗伯特·M.波西格 / 张国辰 / 重庆出版社 / 2011-9 / 36.00元

在一个炎热的夏天,父子两人和约翰夫妇骑摩托车从明尼苏达到加州,跨越美国大陆,旅行的过程与一个青年斐德洛研修科学技术与西方经典,寻求自我的解脱,以及探寻生命的意义的过程相互穿插。一路上父亲以一场哲学肖陶扩的形式,将见到的自然景色,野外露营的经历,夜晚旅店的谈话,机车修护技术等等日常生活与西方从苏格拉底以来的理性哲学的深入浅出的阐述与评论相结合,进行了对形而上学传统的主客体二元论的反思,以及对科学与艺......一起来看看 《禅与摩托车维修艺术》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

SHA 加密
SHA 加密

SHA 加密工具

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器