Forem: Ruben Arushanyan

React Comfort - conditional rendering in react become easier and cleaner.

Ruben Arushanyan — Mon, 07 Nov 2022 09:43:24 +0000

You can find the full documentation on the website

If, Else, and ElseIf is a react helper components with the help of which conditional rendering in react become easier and cleaner.

Installation

npm install react-comfort

Examples

Simple example using If and Else combination.

import {If, Else} from 'react-comfort'

const Bar = (props) => {
    return (
        <If condition={props.age >= 18}>
            <h2>🍺🍺🍺</h2>
            <p>Buy alcohol!</p>

            <Else>
                <h2>🚫🚫🚫</h2>
                <p>Sorry, children cannot purchase alcohol!</p>
            </Else>
        </If>
    )
}

More complex example using If, Else, and ElseIf combination.

import {If, Else, ElseIf} from 'react-comfort'

const App = (props) => {
    return (
        <If condition={props.condition_1}>
            <p>Show, if cond_1 is true</p>

            <Else>
                <p>Show, if condition_1 is false</p>
            </Else>

            <ElseIf condition={props.condition_2}>
                <p>Show, if condition_1 is false and condition_2 is true</p>
            </ElseIf>

            <ElseIf condition={props.condition_3}>
                <p>Show, if condition_1 is false and condition_3 is true</p>
            </ElseIf>
        </If>
    )
}

Example for nested If-Else combination.

<If condition={condition_1}>
    <Else condition={condition_2}>
        <If condition={condition_3}>
            <Else condition={condition_4}>
                Hello!
            </Else>
        </If>
    </Else>
</If>

Function Children

Regardless of the condition, both the children of If and Else will be executed by JavaScript․ This can lead to unwanted side effects and performance issues. In such cases, we can pass a function instead of children.

Let's consider the following example:

<If condition={hasResult}>

    <p>Result: { getResult() }</p>

    <Else>
        <p>No Result</p>
    </Else>
</If>

In the example above, the getResult() function will always be called regardless of whether hasResult is true or false.

Let's solve that problem․

<If condition={hasResult}>
    {() => <p>Result: { getResult() }</p>}

    <Else>
        <p>No Result</p>
    </Else>
</If>

Quickly and easily create react-contexts and implement state management

Ruben Arushanyan — Sat, 05 Nov 2022 07:20:07 +0000

React Component Shell

You can find the full documentation at the https://react-component-shell.js.org

React Component Shell is a package that allows you to quickly and easily create react-contexts and implement state management.

Shell is a JavaScript class that has certain methods and properties to provide some type of functionality in the project.

The main concept is to create shell objects and connect them to react components.

Installation

npm install react-component-shell

Basic Usage

Let's create a Game shell that has two methods: run() and stop() that update the .paused property of the state.

game.js

import {Shell} from 'react-component-shell'

class Game extends Shell {
   state = { paused: true }

   run() {
      this.updateState(state => {
          return {...state, paused: false}
      })
   }

   stop() {
      this.updateState(state => {
          return {...state, paused: true}
      })
   }
}

export {Game}

Now let's use the createShellProvider() function to create a react-context provider and access hooks for the Game shell.

game-context.js

import {createShellProvider} from 'react-component-shell'
import {Game} from './game.js'

const [ GameProvider, useGame, useGameState ] = createShellProvider({ shellClass: Game })

export {GameProvider, useGame, useGameState}

The createShellProvider() function returns an array with three values. The first value is a provider component, the second value is a react hook that returns a shell object, and the last value is a react hook that return a state value by a selector.

In our example, we created the GameProvider provider and useGame, useGameState hooks.

Now let's use them in react app.

App.js

import {GameProvider, useGame, useGameState} from './game-context.js'

const App = (props) => {
    return (
        <GameProvider>
            <GamePauseButton />
        </GameProvider>
    )
}

const GamePauseButton = (props) => {
    const game = useGame()
    const paused = useGameState(state => state.paused)

    const clickHandler = () => {
        if (paused) {
            game.run()
        } else {
            game.stop()
        }
    }

    return <button onClick={clickHandler}>{ paused ? 'Run' : 'Stop' }</button>

}

export default App

In the example above, we can apply the useGame() or useGameState() hooks to any component inside the <GameProvider>.

useGame() returns a game object, and we can call its methods run() or stop() or read and write its properties.

useGameState(selector) returns the value of the state of the game, which is indicated by the selector function, and every time the change of the specified value in the state will result in the re-rendering of the given component.

Redux Actions - Without declaring CONSTANTS and action-creator functions for each action

Ruben Arushanyan — Tue, 01 Nov 2022 17:15:40 +0000

Actions Creator

You can find the full documentation on the https://actions-creator.js.org

Description

actions-creator is an awesome javascript package that allows you to dynamically create action objects in Redux without having to declare CONSTANTS and separate action-creator functions for each action.

Installation

npm install actions-creator

Usage Example

import {actionsCreator} from 'actions-creator'

const action_1 = actionsCreator.MY.FIRST.ACTION('arg1')
//      {
//          type: 'MY/FIRST/ACTION',
//          payload: 'arg1',
//      } 

const action_2 = actionsCreator.This.is.my.second.action(2021)
//      {
//          type: 'This/is/my/second/action',
//          payload: 2021,
//      } 


// To get the type of action
String( actionsCreator.MY.FIRST.ACTION ) // 'MY/FIRST/ACTION'
// or
actionsCreator.MY.FIRST.ACTION().type // 'MY/FIRST/ACTION'

Actions With Callback

Sometimes we need the action to have callback capability. It might be necessary in many cases.

Actions Creator allows us to do this in a beautiful way:
When we try to generate an action object, we can pass the callback function as the last argument. Actions Creator will check and if the last argument is a function, it will be considered as a callback function.

import {actionsCreator} from 'actions-creator'

const callback = () => {
    console.log('Hello, I am callback!!!')
}

const action = actionsCreator.MY.CALLBACKABLE.ACTION(123, callback)
//      {
//          type: 'MY/CALLBACKABLE/ACTION',
//          payload: 123,
//          cb: [Function callback],
//      }

action.cb() // 'Hello, I am callback!!!'

Syntax

`actionsCreator.ANY.ACTION(payload, callback?)`

payload <Any> Any value as a payload.
callback <Function> Any function as a callback.

Returns <Object>

type <String> Action type as a string.

actionsCreator.ANY.ACTION().type === 'ANY/ACTION' // true

payload <Any>

The value of the payload - given in the first argument.
```
actionsCreator.ANY.ACTION(123).payload === 123 // true
```

cb <Function>

The function of the callback - given in the last argument.

const callback = () => {};

actionsCreator.ANY.ACTION(123, callback).cb === callback // true

Documentation

Produce By Path - New JavaScript Design Pattern

Ruben Arushanyan — Sun, 11 Jul 2021 11:03:56 +0000

Description

Produce By Path is a design pattern, which is used to dynamically produce values by using the path to which it is applied.

Installation

npm install produce-by-path

Usage

import ProduceByPath from "produce-by-path"
// CommonJS usage
// const ProduceByPath = require("produce-by-path")


// define producer instance to our liking :)
const instance = new ProduceByPath({
    call: (path, args) => {
        return ({
            path,
            args,
        })
    },
    toPrimitive: (path, hint) => {
        return path.join("--")
    }
})


//      Now we can apply the [[instance]] object with any properties
//      combination and call as a function and receive the desired
//      result as we defined in the [[call]] handler.
console.log( instance.I.love.you("arg1", "arg2") )  
//      {
//          path: ["I", "love", "you"],
//          args: ["arg1", "arg2"]
//      } 


//      We can also apply the [[instance]] object with any properties
//      combination and convert as a primitive value and receive
//      the desired result as we defined in [[toPrimitive]] handler.
console.log( String(instance.I.love.you) )
//      I--love--you

console.log( instance.I.love.you + '')
//      I--love--you

Why should I use an ProduceByPath pattern?

Using that pattern in some cases we can build a simple and intuitive interface for my software.

For example, the redux-cool library use that pattern for making action objects.

import {actionsCreator} from "redux-cool"


const first_action = actionsCreator.MY.FIRST.ACTION("arg1", "arg2")
console.log(first_action)
//      {
//          type: "MY/FIRST/ACTION",
//          args: ["arg1", "arg2"],
//          cb: f() identity,
//          _index: 1
//      } 

const second_action = actionsCreator.This.is.my.second.action(2021)
console.log(second_action)
//      {
//          type: "This/is/my/second/action",
//          args: [2021],
//          cb: f() identity,
//          _index: 2
//      } 



//      If we just need to generate an action type as a string,
//      we can do it easily
const type1 = String(actionsCreator.MY.FIRST.ACTION)
console.log(type1)
//      "MY/FIRST/ACTION"

//      or any string conversion
const type2 = actionsCreator.MY.FIRST.ACTION + ""
console.log(type2)
//      "MY/FIRST/ACTION"

Links

npm
github
redux-cool actionsCreator

Redux-Cool Philosophy

Ruben Arushanyan — Wed, 28 Apr 2021 18:23:47 +0000

In this article, I am talking about the main problems which we usually face when we use Redux in complex projects. I will also talk about the new Redux-Cool library, with the help of which we can solve those problems. I'm convinced that many developers using Redux need a similar article.

Motivation

As we know Redux is a predictable state container for JavaScript apps. Below you can find the architecture of Redux.

As can be seen from the diagram above, we have a store where our state data is stored, and if we want to change something in the state, we must create an action object which will contain all the information on how we need to change the state. Afterward, we need to dispatch the action object to the reducer. The reducer must receive the action object and based on that it will figure out what to change and how to make that change. This is how the state management works in Redux. Redux as a state management concept is really good because it is predictable - we are not changing the state directly.

As we have already mentioned, Redux is very good as a state management concept, however, when we try to realize it in real and complex projects, we encounter numerous problems and headaches which is why many developers refuse to use Redux.

ReduxToolkit tried to solve these problems but with no result.

I created the Redux Cool to solve all of these problems.

Problems

Below are the main problems which we usually face when we use Redux in complex projects.

Problem 1: Confusion and Boredom

In many projects that have various features, there are many cases when it is required to change the state during some actions. We have to create a new action type every single time, to add an action handler for that in reducer, every time we have to import the appropriate action creator, create action and dispatch it. This is quite a boring process. Besides, we have many action creators and action handlers, which are just written one under another and not grouped in logical and visual form.

Solution:

In Redux Cool, the reducers are created with the help of a reducer tree - the reducer tree is a nested javascript object in which action-handler functions are defined. Each action-handler has its logical place in the reducer tree. The hierarchical order of action-handlers enables us to define reducer-logic in a grouped and visual form.

Besides, in Redux Cool, we don't have a separate action creator function for each action, instead, we have one actionsCreator action producer with which we can create any action object in dynamic and inline ways.

See details:

Problem 2: Define a Single Action In Multiple Reducers

In complex projects, we are usually splitting our reducer functions into separate reducer functions, each managing independent parts of the state. Then, using the combineReducers function of Redux, we are combining it creating one general reducer function. Very often, there is a need to have specific types of actions, which we would like to apply simultaneously to all reducers or to specific reducers. For example, when we have LOGOUT action and during that action, we want to erase all the account-specific data that exists in our Redux state.

Solution:

The actions have Global and Local contexts in Redux Cool. The actions with Global context can be applied to various Reducers.

See details:

Global And Local Actions

Problem 3: Actions With Callback capability

Usually, when we are using Redux Middlewares for side effects(e.g. redux-saga), there is a need to have actions with Callback capability.

Solution:

In Redux Cool, all the actions have Callback capability - by default, it is an identity function(x => x) but we can pass any callback function during the creation of action.

See details:

Actions Creator

How to solve the main problems which we usually face when we use Redux in complex projects.

Ruben Arushanyan — Wed, 28 Apr 2021 18:20:29 +0000

Motivation

ReduxToolkit tried to solve these problems but with no result.

I created the Redux Cool to solve all of these problems.

Problems

Below are the main problems which we usually face when we use Redux in complex projects.

Problem 1: Confusion and Boredom

Solution:

See details:

Problem 2: Define a Single Action In Multiple Reducers

Solution:

The actions have Global and Local contexts in Redux Cool. The actions with Global context can be applied to various Reducers.

See details:

Global And Local Actions

Problem 3: Actions With Callback capability

Usually, when we are using Redux Middlewares for side effects(e.g. redux-saga), there is a need to have actions with Callback capability.

Solution:

In Redux Cool, all the actions have Callback capability - by default, it is an identity function(x => x) but we can pass any callback function during the creation of action.

See details:

Actions Creator

Redux Cool New 2021 Toolkit

Ruben Arushanyan — Wed, 14 Apr 2021 13:35:07 +0000

Build redux logic, without getting nervous ❤️

Description

Redux Cool is an awesome tiny package that allows you to easily and intuitively write redux logic. It is the collection of two separate libraries, one designed to create reducer functions and the other to create action objects: (Reducers Creator for creating reducers functions and Actions Creator for creating actions object)

Installation

npm install redux redux-cool

Getting Started

Create a file named src/accountReducer.js

src/accountReducer.js

import {reducersCreator} from "redux-cool"

const initialState = {
    profile: {
        data: null
    }
}

const reducerTree = {

    PROFILE: {

        SET: (state, action) => {
            const [data] = action.args
            state.profile.data = data
        },

        UPDATE_EMAIL: (state, action) => {
            const [email] = action.args
            state.profile.data.email = email
        }
    },

    CLEAR: (state, action) => {
        state.profile.data = null
    }

}

const accountReducer = reducersCreator(
    "ACCOUNT",
    initialState,
    reducerTree,
)

export default accountReducer

As you can see in the example above, we create an accountReducer by calling the reducersCreator function and passing it three arguments:

"ACCOUNT" : It's the name of the reducer, it can be any String
initialState : It's the initial state of the reducer, it can be any Object
reducerTree : It's an Object (can have any deep and nested structure) that intuitively and in readible ways, defines handler functions for reducer. Handler functions as an argument take state and action and update the state. It automatically uses the immer library to do immutable updates with normal mutative code, like state.profile.data.email = email. There is no need to manually do immutable updates and return the result. If you are not familiar with the immer library, please look at it, it is very important.

As a result, we get the accountReducer function, which can handle the following type of actions:

types: "PROFILE/SET" or "ACCOUNT/PROFILE/SET"
types: "PROFILE/UPDATE_EMAIL" or "ACCOUNT/PROFILE/UPDATE_EMAIL"
types: "CLEAR" or "ACCOUNT/CLEAR"

As you can see, each handler can work with two types of actions, one consisting of the path described in reducerTree, the second is the same as the first type plus the reducer name that should be added from the beginning like "CLEAR" and "ACCOUNT/CLEAR". That is the most important and useful feature of this library.

In both cases (`"CLEAR"` and `"ACCOUNT/CLEAR"`), the CLEAR handler is called in the accountReducer, but when we have multiple reducers that have the CLEAR handler and we need to clear the state of all reducers, we must use `"CLEAR"` action type, but if we need to delete only the ACCOUNT reducer state we must use the `"ACCOUNT/CLEAR"` action type.

Now that we have the accountReducer, let's create the redux store

Create a file named src/store.js

src/store.js

import {createStore} from "redux"
import {actionsCreator} from "redux-cool"
import accountReducer from "./accountReducer.js"

// Create Store
const store = createStore(accountReducer)

// Dispatch Set Profile Action
store.dispatch(actionsCreator.PROFILE.SET({
        email: 'test@test',
        name: 'Test'
    })
)
console.log(store.getState())
// {
//     profile: {
//         data: {email: 'test@test', name: 'Test'}
//     }
// }


// Dispatch Update Email Action
store.dispatch(actionsCreator.PROFILE.UPDATE_EMAIL('test2@test2'))
console.log(store.getState())
// {
//     profile: {
//         data: {email: 'test2@test2', name: 'Test'}
//     }
// }



// Dispatch Clear Email Action
store.dispatch(actionsCreator.CLEAR())
console.log(store.getState())
// {
//     profile: {
//         data: null
//     }
// }

Forem: Ruben Arushanyan

React Comfort - conditional rendering in react become easier and cleaner.

Installation

Examples

Function Children

Links

Quickly and easily create react-contexts and implement state management

React Component Shell

Installation

Basic Usage

Links

Redux Actions - Without declaring CONSTANTS and action-creator functions for each action

Actions Creator

Description

Installation

Usage Example

Actions With Callback

Syntax

actionsCreator.ANY.ACTION(payload, callback?)

Documentation

Links

Produce By Path - New JavaScript Design Pattern

Description

Installation

Usage

Why should I use an ProduceByPath pattern?

Links

Redux-Cool Philosophy

Motivation

Problems

Problem 1: Confusion and Boredom

Solution:

Problem 2: Define a Single Action In Multiple Reducers

Solution:

Problem 3: Actions With Callback capability

Solution:

How to solve the main problems which we usually face when we use Redux in complex projects.

Motivation

Problems

Problem 1: Confusion and Boredom

Solution:

Problem 2: Define a Single Action In Multiple Reducers

Solution:

Problem 3: Actions With Callback capability

Solution:

Redux Cool New 2021 Toolkit

Build redux logic, without getting nervous ❤️

Description

Installation

Getting Started

Resources

`actionsCreator.ANY.ACTION(payload, callback?)`