Git Product home page Git Product logo

rbx-react-redux's Introduction

rbx-react-redux

Performant React bindings for rbx-redux

Installation

Add this to your wally.toml file:

ReactRedux = "quamatic/[email protected]"

Usage Guide

Passing a Store

-- App.lua
local React = require(Path.To.React)
local ReactRedux = require(Path.To.ReactRedux)

local store = require(Path.To.Your.Redux.Store)

local SomeRandomElement = ...

local function App()
    return React.createElement(ReactRedux.Provider, {
        store = store,
    }, React.createElement(SomeRandomElement))
end

-- OR --

-- Using another component for the sake of readability
local function StoreConsumers()
    return e(React.Fragment, nil, {
        SomeRandomElement = React.createElement(SomeRandomElement)
    })
end

local function App()
    return React.createElement(ReactRedux.Provider, {
        store = store,
    }, e(StoreConsumers))
end

Basic Counter Example

-- Counter.lua
local React = require(Path.To.React)
local ReactRedux = require(Path.To.ReactRedux)

local counterActions = require(Path.To.Some.Slice.With.Actions)

local function Counter()
    local count = ReactRedux.useSelector(function(state)
        -- State start as { counter = 0 } for example purposes.
        return state.counter.value
    end)

    local dispatch = ReactRedux.useDispatch()

    return React.createElement("TextLabel", {
        Text = `Counter: {count}`,

        [React.Event.Activated] = function()
            -- Increment counter
            dispatch(counterActions.increment())
        end,

        [React.Event.MouseButton2Click] = function()
            -- Decrement counter
            dispatch(counterActions.decrement())
        end,
    })
end

rbx-react-redux's People

Contributors

quamatic avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.