Neodymium Plated Magnet

    remporium

    0.0.1 • Public • Published

    Remporium

    Redux inspired state management library for rescript-react

    Installation

    # If you use npm:
    npm install remporium
    
    # Or if you use Yarn:
    yarn add remporium

    Add to bsconfig.json

    "bs-dependencies": [
      "remporium"
    ]

    When compiling your project make sure to add -with-deps flag to rescript compiler

    rescript build -with-deps

    Basic setup

    Define your state and actions

    type action = Increment | Decrement
    type state = {
        count: int
    }
    
    let updateFunction = (state, action) => {
        switch action {
        | Increment => { count: state.count + 1 }
        | Decrement => { count: state.count - 1 }
        }
    }
    
    let initialState = {
        count: 0
    }

    Next create store object and store module

    let store = Remporium.makeStore(initialState, updateFunction)
    
    module CounterStore = Remporium.CreateModule({
        type action = action
        type state = state
    })

    Add CounterStore.Provider component to the root of your react component tree

      <CounterStore.Provider store=store>
        {...}
      </CounterStore.Provider>,

    Hooks

    Remporium provides 2 react hooks to use in your components useDispatch and useSelector

    module Counter = {
      @react.component
      let make = () => {
          let dispatch = CounterStore.useDispatch()
          let count = CounterStore.useSelector(state => state.count)
    
          <div>
            <button onClick=(_ => dispatch(Increment))>
                {"Increment"->React.string}
            </button>
            <button onClick=(_ => dispatch(Decrement))>
                {"Decrement"->React.string}
            </button>
            <div>{count->React.int}</div>
          </div>
      }
    }

    Immutability

    Remporium check for changes in state by performing shallow equality check, so make sure that your update function does not mutate state but returns new one

    DevTools

    Remporium comes with support for redux-devtools via redux-devtools-extension(https://github.com/zalmoxisus/redux-devtools-extension)

    To use redux devtools when creating store use Remporium.makeStoreWithDevTools function instead of Remporium.makeStore

    let store = Remporium.makeStoreWithDevTools(initialState, updateFunction)

    Remporium.makeStoreWithDevTools function takes optional actionName parameter. Because you can't serialize rescript variant to string this parameter is used to map actions to string that then are displayed in devtools, without it every action will be named update

    let actionName = (action) => {
      switch action {
      | Increment => "Increment"
      | Decrement => "Decrement"
      }
    }
    
    let store = Remporium.makeStoreWithDevTools(initialState, updateFunction, ~actionName)

    Examples

    For more examples check out examples folder

    Install

    npm i remporium

    DownloadsWeekly Downloads

    7

    Version

    0.0.1

    License

    MIT

    Unpacked Size

    21.9 kB

    Total Files

    10

    Last publish

    Collaborators

    • saper150