Issue 26 update to new context api

src/StoreProvider.lua

@@ -4,18 +4,27 @@ local storeKey = require(script.Parent.storeKey)
 
 local StoreProvider = Roact.Component:extend("StoreProvider")
 
-function StoreProvider:init(props)
+function StoreProvider.validateProps(props)
 	local store = props.store
-
+	
 	if store == nil then
-		error("Error initializing StoreProvider. Expected a `store` prop to be a Rodux store.")
+		return false, "Error initializing StoreProvider. Expected a `store` prop to be a Rodux store."
+	elseif props.Provider == nil then
+		return false, "Error initializing StoreProvider. Expected a `Provider` prop to be a Rodux Provider. See Roact.createContext()."
+	else
+		return true
 	end
+end
 
-	self._context[storeKey] = store
+function StoreProvider:init(props)
+	self.store = props.store
+	self.Provider = props.Provider
 end
 
 function StoreProvider:render()
-	return Roact.oneChild(self.props[Roact.Children])
+	return Roact.createElement(self.Provider, {
+		value = self.store
+	}, self.props[Roact.Children])
 end
 
 return StoreProvider

src/StoreProvider.spec.lua

@@ -3,13 +3,15 @@ return function()
 
 	local Roact = require(script.Parent.Parent.Roact)
 	local Rodux = require(script.Parent.Parent.Rodux)
+	local StoreContext = Roact.createContext()
 
 	it("should be instantiable as a component", function()
 		local store = Rodux.Store.new(function()
 			return 0
 		end)
 		local element = Roact.createElement(StoreProvider, {
-			store = store
+			store = store,
+			Provider = StoreContext.Provider
 		})
 
 		expect(element).to.be.ok()
@@ -27,4 +29,40 @@ return function()
 			Roact.mount(element)
 		end).to.throw()
 	end)
+
+	it("should accept multiple children", function()
+		local store = Rodux.Store.new(function()
+			return 0
+		end)
+
+		local consumedStore1 = nil
+		local consumedStore2 = nil
+
+
+		local element = Roact.createElement(StoreProvider, {
+			store = store,
+			Provider = StoreContext.Provider
+		}, {
+			test1 = Roact.createElement(StoreContext.Consumer, {
+				render = function(store)
+					consumedStore1 = store
+				end
+			}),
+			test2 = Roact.createElement(StoreContext.Consumer, {
+				render = function(store)
+					consumedStore2 = store
+				end
+			}),
+		})
+
+		expect(element).to.be.ok()
+
+		local handle = Roact.mount(element, nil, "StoreProvider-test")
+
+		expect(consumedStore1).to.be.equal(store)
+		expect(consumedStore2).to.be.equal(store)
+
+		Roact.unmount(handle)
+		store:destruct()
+	end)
 end

src/connect.lua

@@ -64,7 +64,10 @@ local function connect(mapStateToPropsOrThunk, mapDispatchToProps)
 		mapDispatchToProps = noop
 	end
 
-	return function(innerComponent)
+
+
+
+	return function(innerComponent, Consumer)
 		if innerComponent == nil then
 			local message = formatMessage({
 				"connect returns a function that must be passed a component.",
@@ -104,8 +107,9 @@ local function connect(mapStateToPropsOrThunk, mapDispatchToProps)
 			end)
 		end
 
-		function Connection:init()
-			self.store = getStore(self)
+		function Connection:init(props)
+			--Roact.createElement(Consumer, )
+			self.store = props.store
 
 			if self.store == nil then
 				local message = formatMessage({
@@ -193,8 +197,16 @@ local function connect(mapStateToPropsOrThunk, mapDispatchToProps)
 		function Connection:render()
 			return Roact.createElement(innerComponent, self.state.propsForChild)
 		end
-
-		return Connection
+
+		return function(props)
+			return Roact.createElement(Consumer, {
+				render = function(store)
+					local innerProps = props
+					innerProps["store"] = store
+					return Roact.createElement(Connection, innerProps)
+				end
+			})
+		end
 	end
 end
 

src/connect.spec.lua

@@ -75,11 +75,13 @@ return function()
 			end
 		end
 
-		local ConnectedSomeComponent = connect(mapStateToProps)(NoopComponent)
+		local StoreContext = Roact.createContext()
+		local ConnectedSomeComponent = connect(mapStateToProps)(NoopComponent, StoreContext.Consumer)
 
 		local store = Rodux.Store.new(reducer)
 		local tree = Roact.createElement(StoreProvider, {
 			store = store,
+			Provider = StoreContext.Provider
 		}, {
 			someComponent = Roact.createElement(ConnectedSomeComponent),
 		})
@@ -96,11 +98,13 @@ return function()
 			end
 		end
 
-		local ConnectedSomeComponent = connect(mapStateToProps)(NoopComponent)
+		local StoreContext = Roact.createContext()
+		local ConnectedSomeComponent = connect(mapStateToProps)(NoopComponent, StoreContext.Consumer)
 
 		local store = Rodux.Store.new(reducer)
 		local tree = Roact.createElement(StoreProvider, {
 			store = store,
+			Provider = StoreContext.Provider
 		}, {
 			someComponent = Roact.createElement(ConnectedSomeComponent),
 		})
@@ -115,11 +119,13 @@ return function()
 			return "nah"
 		end
 
-		local ConnectedSomeComponent = connect(mapStateToProps)(NoopComponent)
+		local StoreContext = Roact.createContext()
+		local ConnectedSomeComponent = connect(mapStateToProps)(NoopComponent, StoreContext.Consumer)
 
 		local store = Rodux.Store.new(reducer)
 		local tree = Roact.createElement(StoreProvider, {
 			store = store,
+			Provider = StoreContext.Provider
 		}, {
 			someComponent = Roact.createElement(ConnectedSomeComponent),
 		})
@@ -141,11 +147,13 @@ return function()
 			renderCount = renderCount + 1
 		end
 
-		local ConnectedSomeComponent = connect(mapStateToProps)(SomeComponent)
+		local StoreContext = Roact.createContext()
+		local ConnectedSomeComponent = connect(mapStateToProps)(SomeComponent, StoreContext.Consumer)
 
 		local store = Rodux.Store.new(reducer)
 		local tree = Roact.createElement(StoreProvider, {
 			store = store,
+			Provider = StoreContext.Provider
 		}, {
 			someComponent = Roact.createElement(ConnectedSomeComponent),
 		})
@@ -184,11 +192,13 @@ return function()
 			renderCount = renderCount + 1
 		end
 
-		local ConnectedSomeComponent = connect(nil, mapDispatchToProps)(SomeComponent)
+		local StoreContext = Roact.createContext()
+		local ConnectedSomeComponent = connect(nil, mapDispatchToProps)(SomeComponent, StoreContext.Consumer)
 
 		local store = Rodux.Store.new(reducer)
 		local tree = Roact.createElement(StoreProvider, {
 			store = store,
+			Provider = StoreContext.Provider
 		}, {
 			someComponent = Roact.createElement(ConnectedSomeComponent),
 		})
@@ -233,12 +243,14 @@ return function()
 			}
 		end
 
-		local ConnectedSomeComponent = connect(nil, mapDispatchToProps)(SomeComponent)
+		local StoreContext = Roact.createContext()
+		local ConnectedSomeComponent = connect(nil, mapDispatchToProps)(SomeComponent, StoreContext.Consumer)
 
 		-- We'll use the thunk middleware, as it should always return its result
 		local store = Rodux.Store.new(reducer, nil, { Rodux.thunkMiddleware })
 		local tree = Roact.createElement(StoreProvider, {
 			store = store,
+			Provider = StoreContext.Provider
 		}, {
 			someComponent = Roact.createElement(ConnectedSomeComponent)
 		})
@@ -263,6 +275,7 @@ return function()
 		end)
 
 		it("should render parent elements before children", function()
+			print("Test 1")
 			local function mapStateToProps(state)
 				return {
 					count = state.count,
@@ -277,19 +290,21 @@ return function()
 				end
 			end
 
-			local ConnectedChildComponent = connect(mapStateToProps)(ChildComponent)
+			local StoreContext = Roact.createContext()
+			local ConnectedChildComponent = connect(mapStateToProps)(ChildComponent, StoreContext.Consumer)
 
 			local function ParentComponent(props)
 				return Roact.createElement(ConnectedChildComponent, {
 					parentCount = props.count,
 				})
 			end
 
-			local ConnectedParentComponent = connect(mapStateToProps)(ParentComponent)
+			local ConnectedParentComponent = connect(mapStateToProps)(ParentComponent, StoreContext.Consumer)
 
 			local store = Rodux.Store.new(reducer)
 			local tree = Roact.createElement(StoreProvider, {
 				store = store,
+				Provider = StoreContext.Provider
 			}, {
 				parent = Roact.createElement(ConnectedParentComponent),
 			})
@@ -320,6 +335,7 @@ return function()
 		end)
 
 		it("should render child elements before children when TempConfig.newConnectionOrder is false", function()
+			print("Test 2")
 			local function mapStateToProps(state)
 				return {
 					count = state.count,
@@ -334,19 +350,21 @@ return function()
 				end
 			end
 
-			local ConnectedChildComponent = connect(mapStateToProps)(ChildComponent)
+			local StoreContext = Roact.createContext()
+			local ConnectedChildComponent = connect(mapStateToProps)(ChildComponent, StoreContext.Consumer)
 
 			local function ParentComponent(props)
 				return Roact.createElement(ConnectedChildComponent, {
 					parentCount = props.count,
 				})
 			end
 
-			local ConnectedParentComponent = connect(mapStateToProps)(ParentComponent)
+			local ConnectedParentComponent = connect(mapStateToProps)(ParentComponent, StoreContext.Consumer)
 
 			local store = Rodux.Store.new(reducer)
 			local tree = Roact.createElement(StoreProvider, {
 				store = store,
+				Provider = StoreContext.Provider
 			}, {
 				parent = Roact.createElement(ConnectedParentComponent),
 			})

src/getStore.spec.lua

@@ -6,57 +6,32 @@ return function()
 
 	local getStore = require(script.Parent.getStore)
 
-	it("should return the store when present", function()
+	it("should get store from consumer", function()
 		local function reducer()
 			return 0
 		end
 
 		local store = Rodux.Store.new(reducer)
 		local consumedStore = nil
 
-		local StoreConsumer = Roact.Component:extend("StoreConsumer")
-
-		function StoreConsumer:init()
-			consumedStore = getStore(self)
-		end
-
-		function StoreConsumer:render()
-			return nil
-		end
+		local StoreContext = Roact.createContext()
 
 		local tree = Roact.createElement(StoreProvider, {
 			store = store,
+			Provider = StoreContext.Provider
 		}, {
-			Consumer = Roact.createElement(StoreConsumer),
+			Consumer = Roact.createElement(StoreContext.Consumer, {
+				render = function(store)
+					consumedStore = store
+					return Roact.createElement("TextButton")
+				end
+			})
 		})
 
 		local handle = Roact.mount(tree)
-
 		expect(consumedStore).to.equal(store)
 
 		Roact.unmount(handle)
 		store:destruct()
 	end)
-
-	it("should return nil when the store is not present", function()
-		-- Use a non-nil value to know for sure if StoreConsumer:init was called
-		local consumedStore = 6
-
-		local StoreConsumer = Roact.Component:extend("StoreConsumer")
-
-		function StoreConsumer:init()
-			consumedStore = getStore(self)
-		end
-
-		function StoreConsumer:render()
-			return nil
-		end
-
-		local tree = Roact.createElement(StoreConsumer)
-		local handle = Roact.mount(tree)
-
-		expect(consumedStore).to.equal(nil)
-
-		Roact.unmount(handle)
-	end)
 end