How to use inferno-redux - 10 common examples

if (playing) {
          this.audioRef.current.play();
        }
      }
    }

    return (
      // eslint-disable-next-line jsx-a11y/media-has-caption
      <audio id="audio-element">
        {source ? <source src="{source}"> : null}
      </audio>
    );
  }
}

export default connect(mapStateToProps)(AudioElement);

it('should throw a helpful error for invalid mapDispatchToProps arguments', () => {
      const InvalidMapDispatch = connect(
        null,
        'invalid'
      )(
        class InvalidMapDispatch extends Component {
          render() {
            return <div>;
          }
        }
      );

      const error = renderWithBadConnect(InvalidMapDispatch);
      expect(error).toContain('string');
      expect(error).toContain('mapDispatchToProps');
      if (supportFnName) {
        expect(error).toContain('InvalidMapDispatch');
      }</div>

it('should not call update if mergeProps return value has not changed', () => {
      let mapStateCalls = 0;
      let renderCalls = 0;
      const store = createStore(stringBuilder);

      const Container = connect(
        () => ({ a: ++mapStateCalls }),
        null,
        () => ({
          changed: false
        })
      )(
        class Container extends Component {
          render() {
            renderCalls++;
            return ;
          }
        }
      );

      const vNode = (

it('should throw an error if a component is not passed to the function returned by connect', () => {
      expect(connect()).toThrowError(/You must pass a component to the function/);
    });

it('should wrap impure components without supressing updates', () => {
      const store = createStore(() => ({}));

      class ImpureComponent extends Component {
        render() {
          return ;
        }
      }

      const decorator = connect(
        state => state,
        null,
        null,
        { pure: false }
      );
      const Decorated = decorator(ImpureComponent);

      class StatefulWrapper extends Component {
        constructor() {
          super();
          this.state = { value: 0 };
        }

        getChildContext() {
          return {
            statefulValue: this.state.value

return ;
          }
        }
      );

      const mapStateToPropsC = sinon.spy(state => ({ count: state }));
      const C = connect(mapStateToPropsC)(
        class C extends Component {
          render() {
            return ;
          }
        }
      );

      const mapStateToPropsD = sinon.spy(state => ({ count: state }));
      const D = connect(mapStateToPropsD)(
        class D extends Component {
          render() {
            return <div>{this.props.count}</div>;
          }
        }
      );

      const vNode = (
        
          <a>
        </a><a>
      );
      renderToContainer(vNode);

      expect(mapStateToPropsB.callCount).toBe(1);
      expect(mapStateToPropsC.callCount).toBe(1);</a>

import {connect} from 'inferno-redux';

import {Nav} from './nav';
import * as actions from './nav-actions';

export const NavContainer = connect(
  function mapStateToProps(state) {
    return {
      statistic: state.nav.statistic,
      price: state.nav.price,
      fetching: state.nav.fetching,
      error: state.nav.error,
      chains: state.base.chains,
      href: state.base.href,
    };
  },
  dispatch => ({
    fetchCoinStatistic: () => dispatch(actions.fetchCoinStatistic()),
    fetchCoinPrice: () => dispatch(actions.fetchCoinPrice()),
  }),
)(Nav);

import {connect} from 'inferno-redux';

import * as actions from '../address/address-actions';
import {Address} from './address';

export const AddressContainer = connect(
  function mapStateToProps(state) {
    return {
      state: state.address,
      width: state.app.width,
    };
  },
  dispatch => ({
    fetchAddressId: data => dispatch(actions.fetchAddressId(data)),
    fetchAddressExecutionsId: data => dispatch(actions.fetchAddressExecutionsId(data)),
    fetchAddressTransfersId: data => dispatch(actions.fetchAddressTransfersId(data)),
    fetchAddressVotersId: data => dispatch(actions.fetchAddressVotersId(data)),
    fetchAddressSettleDepositsId: data => dispatch(actions.fetchAddressSettleDepositsId(data)),
  }),
)(Address);

import {connect} from 'inferno-redux';

import {fetchExecutions} from '../executions/executions-actions';
import {fetchTransfers} from '../transfers/transfers-actions';
import {fetchBlocks} from '../blocks/blocks-actions';
import {fetchVotes} from '../votes/votes-actions';
import {fetchConsensusMetrics} from '../consensus-metrics/consensus-metrics-actions';
import {BlockchainExplorer} from './blockchain-explorer';

export const BlockchainExplorerContainer = connect(
  function mapStateToProps(state) {
    return {
      executions: state.executions,
      transfers: state.transfers,
      blocks: state.blocks,
      votes: state.votes,
      consensus: state.consensus,
      width: state.app.width,
      statistic: state.nav.statistic,
      chainId: state.base.chainId,
    };
  },
  dispatch => ({
    fetchExecutions: data => dispatch(fetchExecutions(data)),
    fetchTransfers: data => dispatch(fetchTransfers(data)),
    fetchBlocks: data => dispatch(fetchBlocks(data)),

controlId={controlId}
        labelText={labelText}
        validationErrors={errors}
        createValidationDiv={false}
        labelFirst={false}
      >
        {this.createInputElement()}
      
    );
  }

}

export default registerStartupRenderer(
  materializedBooleanControlTester,
  connect(mapStateToControlProps)(MaterializedBooleanControl)
);