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:

1import {combineReducers} from "redux";
2import {callReducer} from "redux-call";
3
4export default combineReducers({
5    commands: callReducer
6});
7

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

1import React, {Component} from "react";
2import {connect} from "react-redux";
3import {enableCalls} from "redux-call";
4
5export const COMPONENT_ID = "MyAwesomeComponentId";
6
7export class MyAwesomeComponent extends Component {
8    constructor(props) {
9        super(props);
10        enableCalls(this, COMPONENT_ID, "commands");
11    }
12    
13    playMedia() {
14        this.videoElement.play();
15    }
16    
17    seekMedia(newTime) {
18        this.videoElement.currentTime = newTime;
19    }
20    
21    getCurrentMediaTime() {
22        return this.videoElement.currentTime;
23    }
24    ...
25}
26
27const mapStateToProps = (state) => {
28    return {
29        commands: state.commands
30    }
31};
32
33export default connect(mapStateToProps)(MyAwesomeComponent);
34

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

1import {dispatch} from "store";
2import {call} from "redux-call";
3import {COMPONENT_ID} from "MyAwesomeComponent.js";
4
5
6let playMediaAction = call(COMPONENT_ID, {method: "playMedia"});
7let seekMediaAction = call(COMPONENT_ID, {method: "seekMedia", args: [10]});
8let getCurrentTimeAction = call(COMPONENT_ID, {method: "getCurrentMediaTime", callback: (currentTime) => {
9    console.log(`Current playback time is: ${currentTime}`);
10}});
11
12dispatch(playMediaAction);
13dispatch(seekMediaAction);
14dispatch(getCurrentTimeAction);
15

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