React UI Kit - Framework

React-Router & Redux wrapper as a framework for React-UI-Kit components

1. How it works

Framework Container & Wrapper

• Container parse all the children and verifies if each child is a valid react element, checks if any reducers are declared as static property.
• Will extract the reducers and create a reducers list
• The reducers list will be combined in the Redux store using combineReducers

Module actions

• Modules actions are sent to connect Utils method where are formated into an object with the action name on + capitalized action.name poiting to Redux dispatch
• E.g.:

const mapDispatchToProps = (dispatch, actions) => {
  const actionsList = {};
  Object.values(actions).forEach(action => {
    if (action && typeof action === 'function') {
      const actionName = `on${ucfirst(action.name)}`;
      actionsList[actionName] = (payload) => dispatch(action(payload));
    }
  });
  return { actions: actionsList };
};

[!] See more on the ucfirst helper

Framework Utils

• Utils: internal library with support for api & connect
• api: wrapper for axios library with predefined methods for: REQUEST, GET, POST, PUT, DELETE. Default is set to GET
• connect: Redux connect - connecting React Component to framework store taking Module.actions to be maped on component props.

2. Usage

import { Container } from 'ruk-framework';
import Module from './modules/';

class Wildcard extends React.Component {
  render() {
    return (
      <h2><center>Wildcard for all routes with no redux store</center></h2>
    );
  }
}

render(
  <Container>
    <Module />
    <Wildcard />
  </Container>,
  document.querySelector('#dom-container')
);

3. Framework structure

- Container
    - Provider + store(reducers)
        - Router
            - Wrapper
                - Module1
                - Module2
                - Module3

4. Module structure

- React component which extends React.Component
    - static properties:
        - route = '/';
        - actions = store.actions;
        - types = store.types;
        - reducers = store.reducers;

See the working example for this Modules