react-component-redux

RCR

Demo: https://pashaigood.github.io/react-component-redux/

Redux a great library, that's just too low-level for everyday use.

The idea is to simplify the usage and make the process of creating components as quickly as possible.

Example:

import RCR from 'react-component-redux';
 
// Inherit from the RCR component.
export default class Hello extends RCR.Component {
 
  /**
   * Write the initial state.
   */
  state = {
    counter: 1,
    name: 'friend'
  };
 
  /**
   * Describe the component's actions list.
   */
  actions = {
    updateName(state, name) {
      return {
        ...state,
        name
      };
    },
 
    doIncrement(state, number) {
      return {
        ...state,
        counter: state.counter + number
      };
    },
 
    doDecrement(state, number) {
      return {
        ...state,
        counter: state.counter - number
      };
    }
  };
 
  // It's better to move this template to a external entity.
  // And don't have any render library relations.
  render() {
    const React = require('react');
    return (
      <div>
        <h1>Hello {this.state.name} {this.state.counter} times!</h1>
        <div className="form-group">
          <input
            placeholder="Type your name..."
            className="form-control"
            type="text"
            value={this.state.name}
            onChange={e => this.actions.updateName(e.target.value)}
          />
        </div>
        <button
          className="btn btn-default"
          onClick={() => this.actions.doIncrement(1)}>+
        </button>
        <button
          className="btn btn-default"
          onClick={() => this.actions.doDecrement(2)}>-
        </button>
      </div>
    );
  }
}

And it's all the code!

We abstracted from low-level data management, which can always come back and got a smart component. No need to set no store, no need to write any actions or actionsCreators or reducers. Yes, of course, this approach is not universal, but it covers the simple use of Redux.

Want even more clean code? You are welcome!

// PureComponent.js
import React from 'react';
import RCR from 'react-component-redux';
import * as reducers from  './reducers';
 
function PureFunction({number, random}) {
  return (
    <div>
      <h2>Pure</h2>
      <pre onClick={e => random()}>{number || 'Click to see some random magic!'}</pre>
    </div>
  );
}
 
export default RCR.pure(PureFunction, {reducers});

// reducers.js
export const state = {
  number: undefined
};
 
export function random(state) {
  return {
    ...state,
    number: Math.round(Math.random() * 1000)
  };
}

Multiple use of components

Most Redux problem - component reuse. After the automation of the data, this problem is solved very simply.

component code example

Using a very simple, enough to give the instance its own name:

<div className="row">
  <div className="col-xs-4"><MultiInstance title="First instance with common state."/></div>
  <div className="col-xs-4">
    <MultiInstance name="other-instance" title="Second instance with own state."/>
  </div>
  <div className="col-xs-4"><MultiInstance title="Third instance with common state."/></div>
</div>

Thus is created a new repository other-instance, which can be referenced any number of new instances of a component.

More

Here's what a simple set of actions:

Here is the action:

{
  "type": "TestComponent/DO_DECREMENT",
  "meta": {
    "component": "TestComponent"
  },
  "payload": [
    2
  ]
}

The most interesting here is payload, which is essentially a list of parameters that are passed actions.doDecrement function.