Issue 26 update to new context api (#38)

This fix Closes #26

Issue: StoreProvider and Connect used the legacy context API, this change updates it to the new API

Fix: Added a file StoreContext.lua that returns a static Roact Context. StoreProvider now returns a Roact Provider that passes a Rodux Store as its "value". Connect now uses a Roact Consumer to read in the store via props.

CHANGELOG.md

@@ -1,6 +1,8 @@
 # RoactRodux Changelog
 
-## Current master
+## Unreleased
+* Switch to Roact's better-supported `createContext` feature [#38](https://github.com/roblox/roact-rodux/pulls/38)
+* As a consequence of the above, remove `UNSTABLE_getStore` API
 * Added color schemes for documentation based on user preference ([#44](https://github.com/Roblox/roact-rodux/pull/44)).
 * Use Github Actions for CI
 

rotriever.toml

@@ -6,5 +6,5 @@ content_root = "src"
 version = "0.2.3"
 
 [dependencies]
-Roact = "github.com/roblox/roact@1.2"
+Roact = "github.com/roblox/roact@1.3"
 Rodux = "github.com/roblox/[email protected]"

src/StoreContext.lua

@@ -0,0 +1,5 @@
+local Roact = require(script.Parent.Parent.Roact)
+
+local StoreContext = Roact.createContext()
+
+return StoreContext

src/StoreProvider.lua

@@ -1,21 +1,21 @@
 local Roact = require(script.Parent.Parent.Roact)
 
-local storeKey = require(script.Parent.storeKey)
+local StoreContext = require(script.Parent.StoreContext)
 
 local StoreProvider = Roact.Component:extend("StoreProvider")
 
 function StoreProvider:init(props)
 	local store = props.store
-
 	if store == nil then
 		error("Error initializing StoreProvider. Expected a `store` prop to be a Rodux store.")
 	end
-
-	self._context[storeKey] = store
+	self.store = store
 end
 
 function StoreProvider:render()
-	return Roact.createFragment(self.props[Roact.Children])
+	return Roact.createElement(StoreContext.Provider, {
+		value = self.store
+	}, self.props[Roact.Children])
 end
 
 return StoreProvider

src/connect.lua

@@ -1,7 +1,7 @@
 local Roact = require(script.Parent.Parent.Roact)
-local getStore = require(script.Parent.getStore)
 local shallowEqual = require(script.Parent.shallowEqual)
 local join = require(script.Parent.join)
+local StoreContext = require(script.Parent.StoreContext)
 
 --[[
 	Formats a multi-line message with printf-style placeholders.
@@ -81,7 +81,7 @@ local function connect(mapStateToPropsOrThunk, mapDispatchToProps)
 
 		function Connection.getDerivedStateFromProps(nextProps, prevState)
 			if prevState.stateUpdater ~= nil then
-				return prevState.stateUpdater(nextProps, prevState)
+				return prevState.stateUpdater(nextProps.innerProps, prevState)
 			end
 		end
 
@@ -102,8 +102,8 @@ local function connect(mapStateToPropsOrThunk, mapDispatchToProps)
 			end)
 		end
 
-		function Connection:init()
-			self.store = getStore(self)
+		function Connection:init(props)
+			self.store = props.store
 
 			if self.store == nil then
 				local message = formatMessage({
@@ -120,15 +120,15 @@ local function connect(mapStateToPropsOrThunk, mapDispatchToProps)
 			local storeState = self.store:getState()
 
 			local mapStateToProps = mapStateToPropsOrThunk
-			local mappedStoreState = mapStateToProps(storeState, self.props)
+			local mappedStoreState = mapStateToProps(storeState, self.props.innerProps)
 
 			-- mapStateToPropsOrThunk can return a function instead of a state
 			-- value. In this variant, we keep that value as mapStateToProps
 			-- instead of the original mapStateToProps. This matches react-redux
 			-- and enables connectors to keep instance-level state.
 			if typeof(mappedStoreState) == "function" then
 				mapStateToProps = mappedStoreState
-				mappedStoreState = mapStateToProps(storeState, self.props)
+				mappedStoreState = mapStateToProps(storeState, self.props.innerProps)
 			end
 
 			if mappedStoreState ~= nil and typeof(mappedStoreState) ~= "table" then
@@ -167,7 +167,7 @@ local function connect(mapStateToPropsOrThunk, mapDispatchToProps)
 				propsForChild = nil,
 			}
 
-			local extraState = stateUpdater(self.props, self.state, mappedStoreState)
+			local extraState = stateUpdater(self.props.innerProps, self.state, mappedStoreState)
 
 			for key, value in pairs(extraState) do
 				self.state[key] = value
@@ -184,7 +184,16 @@ local function connect(mapStateToPropsOrThunk, mapDispatchToProps)
 			return Roact.createElement(innerComponent, self.state.propsForChild)
 		end
 
-		return Connection
+		return function(props)
+			return Roact.createElement(StoreContext.Consumer, {
+				render = function(store)
+					return Roact.createElement(Connection, {
+						innerProps = props,
+						store = store,
+					})
+				end
+			})
+		end
 	end
 end
 

src/init.lua

@@ -1,10 +1,8 @@
 local StoreProvider = require(script.StoreProvider)
 local connect = require(script.connect)
-local getStore = require(script.getStore)
 
 return {
 	StoreProvider = StoreProvider,
 	connect = connect,
-	UNSTABLE_getStore = getStore,
 	UNSTABLE_connect2 = connect,
 }