redux-call

About

redux-call is simple util to add ability to execute React component methods via Redux. It can be useful when you need to be able to conrol component from any part of your app

Installation

npm i --save redux-call

How to use

STEP ONE: you need to add redux-call reducer to your app:

import {combineReducers} from "redux";
import {callReducer} from "redux-call";

export default combineReducers({
    commands: callReducer
});

STEP TWO: you need to provide this "commands" store field to your component and run enableCalls method in constructor:

import React, {Component} from "react";
import {connect} from "react-redux";
import {enableCalls} from "redux-call";

export const COMPONENT_ID = "MyAwesomeComponentId";

export class MyAwesomeComponent extends Component {
    constructor(props) {
        super(props);
        enableCalls(this, COMPONENT_ID, "commands");
    }
    
    playMedia() {
        this.videoElement.play();
    }
    
    seekMedia(newTime) {
        this.videoElement.currentTime = newTime;
    }
    
    getCurrentMediaTime() {
        return this.videoElement.currentTime;
    }
    ...
}

const mapStateToProps = (state) => {
    return {
        commands: state.commands
    }
};

export default connect(mapStateToProps)(MyAwesomeComponent);

STEP THREE: Now you can call MyAwesomeComponent methods by dispatching redux actions:

import {dispatch} from "store";
import {call} from "redux-call";
import {COMPONENT_ID} from "MyAwesomeComponent.js";


let playMediaAction = call(COMPONENT_ID, {method: "playMedia"});
let seekMediaAction = call(COMPONENT_ID, {method: "seekMedia", args: [10]});
let getCurrentTimeAction = call(COMPONENT_ID, {method: "getCurrentMediaTime", callback: (currentTime) => {
    console.log(`Current playback time is: ${currentTime}`);
}});

dispatch(playMediaAction);
dispatch(seekMediaAction);
dispatch(getCurrentTimeAction);

Options

enableCalls(componentInstance, componentId, commandsAccessor)

Param	Type	Description
componentInstance	object	React component instance (just pass this in constructor)
componentId	string/number/Symbol	Unique Id of component that will be used for calling
commandsAccessor	string	name of component property that contains commands state (result of callReducer)

call(componentId, {method, args, callback})

Param	Type	Description
componentId	string/number/Symbol	Unique Id of component that must be called
method	string	component method name that must be called
args	array	array of arguments that must be passed to method
callback	function	callback that will be executed with result of method