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 "./styles.scss";
import { createStore } from "redux";

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

Redux (LOGGER) Boilerplate

import React from 'react';
import ReactDOM from 'react-dom';
import App from "./App";
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import logger from 'redux-logger'
import reducer from './reducers';

// if you add more middleware logger is always last and the order that the middleware is called matters
const store = createStore(reducer, applyMiddleware(logger)); 

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;

Redux (THUNK ACTIONS) Boilerplate

import axios from "axios";

export const FETCH_YOUR_ACTION_START = "FETCH_START";  // change this to your action
export const FETCH_YOUR_ACTION_SUCCESS = "FETCH_SUCCESS";  // change this to your action
export const FETCH_YOUR_ACTION_FAILURE = "FETCH_FAILURE";  // change this to your action

export const getSomeData = () => dispatch => {
  // the dispatch function is the thunk
  dispatch({ type: FETCH_YOUR_ACTION_START });  // change this to your action
  axios
    .get("your API endpoint goes here")
    .then(res => {
      /* whatever you want to do with the response */
      dispatch({ type: FETCH_YOUR_ACTION_SUCCESS,  // change this to your action
        payload: res.data }); // add the rest of the payload after res.data like res.data.results
    })
    .catch(err => {
      /* whatever ypu wamt to do with the error */
      dispatch({ type: FETCH_YOUR_ACTION_FAILURE,  // change this to your action
         payload: err.response }); // add the rest of the payload after err.response like err.response.data
    });
};

Redux (THUNK INDEX.JS) Boilerplate

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

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

Redux (THUNK REDUCER) Boilerplate

import {
  FETCH_YOUR_ACTION_START, // change this to your action
  FETCH_YOUR_ACTION_SUCCESS, // change this to your action
  FETCH_YOUR_ACTION_FAILURE // change this to your action
} from "../actions";

const initialState = {
  yourInitialState: [], // change this property to your inital state and value for that state
  error: "",
  isFetching: false
};

function reducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_YOUR_ACTION_START: // change this to your action
      return {
        ...state,
        isFetching: true //boolean to tell the app we are currently fetching data from the API
      };
    case FETCH_YOUR_ACTION_SUCCESS: // change this to your action
      return {
        ...state,
        error: "",
        isFetching: false,
        yourInitialState: action.payload // change this property to your state property
      };
    case FETCH_YOUR_ACTION_FAILURE: // change this to your action
      return {
        ...state,
        error: action.payload,
        isFetching: false
      };
    default:
      return state;
  }
}

export default reducer;