solarhorizon / rodux-hooks Goto Github PK

Currently, in order to use the Rodux hooks in child components, we need to pass the context exported by Rodux Hooks next to RoactRodux.StoreProvider at top level of the tree.
By using the StoreContext exported by RoactRodux, the above step is no longer necessary.

See: https://github.com/Roblox/roact-rodux/blob/master/src/StoreContext.lua

useSelector only uses the updated selector provided to it when the store changes. However, if the component it's used in re-renders for unrelated reasons and the selector changes, useSelector simply re-uses the previous value. This leads to situations where a changing prop that determines the selector will result in a desync between the component and the rodux hook.

local function EggContents(props, hooks)
	local selectedEgg: string = props.selectedEgg
	print(selectedEgg) -- "selectedEgg2"
	local eggInfo = RoduxHooks.useSelector(hooks, function(state)
		print(selectedEgg) -- "selectedEgg"
		return state.liveOpsData.Eggs[selectedEgg]
	end)
	print(eggInfo) -- selectedEgg's info
	local tiles = {}
	-- ...

Currently to use RoduxHooks you're required to pass along the RoactHooks object to every selector you use. This seemed innocuous at first but after using hundreds of selectors in our project it starts to add up. I believe using a hooks field passed to the provider context internally in the useCustomSelector and useSelector implementations would fix this issue.

One caveat I can see to this is that you would need a top-level wrapper component around the provider component to obtain the RoactHooks object. This could introduce backwards compatibility issues but would overall be a cleaner implementation on large codebases.