rsk

Redux Scaffold Kit

A CLI tool for scaffolding react and redux applications.

Installation

npm install -g rsk

Notes

Setting up the store

rsk setup-store

Adding a reducer

rsk reducer <reducer name> <...action names>

Example:

rsk reducer volleyball add-score remove-score

Results in:

store/volleyball/actions.js

export const ADD_SCORE = "ADD_SCORE";
export const REMOVE_SCORE = "REMOVE_SCORE";

export const addScore = () => {
  return {
    type: ADD_SCORE
  };
};

export const removeScore = () => {
  return {
    type: REMOVE_SCORE
  };
};

store/volleyball/reducer.js

import { ADD_SCORE, REMOVE_SCORE } from "../actions/volleyball";

export default function volleyball(state = {}, action) {
  switch (action.type) {
    case ADD_SCORE:
      return state;

    case REMOVE_SCORE:
      return state;

    default:
      return state;
  }
}

Connecting a component

rsk connect <component name> <...reducernames>

Example:

rsk connect Sports volleyball soccer

Turns this:

import React from "react";

const Sports = (props) => {
  return <div>Sports</div>;
};

export default Sports;

Into this:

  import React from "react";
+ import { connect } from "react-redux";
  
  const Sports = (props) => {
    return <div>Sports</div>;
  };

+ const mapStateToProps = ({ volleyball, soccer }) => ({
+   volleyball,
+   soccer
+ });

- export default Sports;
+ export default connect(mapStateToProps)(Sports);

Config

Redux Scaffold Kit can be configured using a .rsk.js file. Just add it to your root folder.

module.exports = {
  codeDirectory: 'src',
  storeDirectory: 'store',
  combineActionsAndReducers: false,
}