Redux boilerplate code

Redux (ACTIONS) Boilerplate

// Change variable and action names
export const ADD_ACTION = 'ADD_ACTION'; // action type

// change function name
export const addAction = item => { // change parameter name
  // action creator
  return {
    // action
    type: ADD_ACTION, // change type name
    payload: item // change payload name
  };
};

Redux (APP.JS) Boilerplate

import React from "react";
import { addAction } from "./actions/"; // change action name and possibly file path
import { connect } from "react-redux";

const App = (props) => {
  return (
    <div className="App">
      // add components here props are now equal to state
    </div>
  )};
const mapStateToProps = (state) = {
  return {
    storeProps: state
}};
//change addAction to the action name
export default connect(mapStateToProps, {addAction})(App) 

Redux (INDEX.JS) Boilerplate

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import reducer from "../src/reducers/";
import "bulma/css/bulma.css";
import "./styles.scss";
import { createStore } from "redux";

const store = createStore(reducer);
const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
);

Redux (REDUCER) Boilerplate

import { addAction } from "../actions/"; // change action name and possibly file path

export const initialState = {}; //add initial state values

const reducer = (state= initialState, actions) => {
  switch (action.type) {
    case ADD_ACTION: // change action name
      return {
        ...state,
        // add new state values based on the needs of the action
      }
  }; 
  default:
    return state;
}

export default reducer;