Refactor to ducks-modular-redux pattern for reducers/actions

src/App.js

@@ -20,8 +20,8 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux';
 import { subscribe } from 'redux-subscriber';
 // redux actions
-import {  exchangeContractReady } from './actions/exchangeContract-actions';
-import {  tokenContractReady } from './actions/tokenContract-actions';
+import {  exchangeContractReady } from './ducks/exchange-contract';
+import {  tokenContractReady } from './ducks/token-contract';
 import {  initializeGlobalWeb3,
           setWeb3ConnectionStatus,
           setCurrentMaskAddress,
@@ -30,7 +30,7 @@ import {  initializeGlobalWeb3,
           setInteractionState,
           factoryContractReady,
           toggleAbout,
-          toggleInvest } from './actions/web3-actions';
+          toggleInvest } from './ducks/web3';
 import {  setInputBalance,
           setOutputBalance,
           setEthPool1,
@@ -45,7 +45,7 @@ import {  setInputBalance,
           setInvestShares,
           setUserShares,
           setInvestTokenBalance,
-          setInvestEthBalance } from './actions/exchange-actions';
+          setInvestEthBalance } from './ducks/exchange';
 import './App.css';
 import scrollToComponent from 'react-scroll-to-component';
 

src/actions/exchange-actions.js

-import {
-  SET_INPUT_BALANCE,
-  SET_OUTPUT_BALANCE,
-  SET_INPUT_TOKEN,
-  SET_OUTPUT_TOKEN,
-  SET_ETH_POOL_1,
-  SET_ETH_POOL_2,
-  SET_TOKEN_POOL_1,
-  SET_TOKEN_POOL_2,
-  SET_ALLOWANCE_APPROVAL_STATE,
-  SET_EXCHANGE_INPUT_VALUE,
-  SET_EXCHANGE_OUTPUT_VALUE,
-  SET_EXCHANGE_RATE,
-  SET_EXCHANGE_FEE,
-  SET_INVEST_TOKEN,
-  SET_INVEST_ETH_POOL,
-  SET_INVEST_TOKEN_POOL,
-  SET_INVEST_SHARES,
-  SET_USER_SHARES,
-  SET_INVEST_TOKEN_BALANCE,
-  SET_INVEST_ETH_BALANCE,
-  SET_INVEST_TOKEN_ALLOWANCE,
-  SET_INVEST_SHARES_INPUT,
-  SET_INVEST_ETH_REQUIRED,
-  SET_INVEST_TOKENS_REQUIRED,
-  SET_INVEST_CHECKED
-} from '../constants';
-
-export const setInputBalance = (inputBalance) => ({
-  type: SET_INPUT_BALANCE,
-  inputBalance
-});
-
-export const setOutputBalance = (outputBalance) => ({
-  type: SET_OUTPUT_BALANCE,
-  outputBalance
-})
-
-export const setInputToken = (inputToken) => ({
-  type: SET_INPUT_TOKEN,
-  inputToken
-});
-
-export const setOutputToken = (outputToken) => ({
-  type: SET_OUTPUT_TOKEN,
-  outputToken
-});
-
-export const setEthPool1 = (ethPool1) => ({
-  type: SET_ETH_POOL_1,
-  ethPool1
-});
-
-export const setEthPool2 = (ethPool2) => ({
-  type: SET_ETH_POOL_2,
-  ethPool2
-});
-
-export const setTokenPool1 = (tokenPool1) => ({
-  type: SET_TOKEN_POOL_1,
-  tokenPool1
-});
-
-export const setTokenPool2 = (tokenPool2) => ({
-  type: SET_TOKEN_POOL_2,
-  tokenPool2
-});
-
-export const setAllowanceApprovalState = (allowanceApproved) => ({
-  type: SET_ALLOWANCE_APPROVAL_STATE,
-  allowanceApproved
-});
-
-export const setExchangeInputValue = (inputValue) => ({
-  type: SET_EXCHANGE_INPUT_VALUE,
-  inputValue
-});
-
-export const setExchangeOutputValue = (outputValue) => ({
-  type: SET_EXCHANGE_OUTPUT_VALUE,
-  outputValue
-});
-
-export const setExchangeRate = (rate) => ({
-  type: SET_EXCHANGE_RATE,
-  rate
-});
-
-export const setExchangeFee = (fee) => ({
-  type: SET_EXCHANGE_FEE,
-  fee
-});
-
-export const setInvestToken = (investToken) => ({
-  type: SET_INVEST_TOKEN,
-  investToken
-});
-
-export const setInvestEthPool = (investEthPool) => ({
-  type: SET_INVEST_ETH_POOL,
-  investEthPool
-});
-
-export const setInvestTokenPool = (investTokenPool) => ({
-  type: SET_INVEST_TOKEN_POOL,
-  investTokenPool
-});
-
-export const setInvestShares = (investShares) => ({
-  type: SET_INVEST_SHARES,
-  investShares
-});
-
-export const setUserShares = (userShares) => ({
-  type: SET_USER_SHARES,
-  userShares
-});
-
-export const setInvestTokenBalance = (investTokenBalance) => ({
-  type: SET_INVEST_TOKEN_BALANCE,
-  investTokenBalance
-});
-
-export const setInvestEthBalance = (investEthBalance) => ({
-  type: SET_INVEST_ETH_BALANCE,
-  investEthBalance
-});
-
-export const setInvestTokenAllowance = (investTokenAllowance) => ({
-  type: SET_INVEST_TOKEN_ALLOWANCE,
-  investTokenAllowance
-});
-
-export const setInvestSharesInput = (investSharesInput) => ({
-  type: SET_INVEST_SHARES_INPUT,
-  investSharesInput
-});
-
-export const setInvestEthRequired = (investEthRequired) => ({
-  type: SET_INVEST_ETH_REQUIRED,
-  investEthRequired
-});
-
-export const setInvestTokensRequired = (investTokensRequired) => ({
-  type: SET_INVEST_TOKENS_REQUIRED,
-  investTokensRequired
-});
-
-export const setInvestChecked = (investChecked) => ({
-  type: SET_INVEST_CHECKED,
-  investChecked
-});

src/actions/exchangeContract-actions.js

-import {
-  EXCHANGE_CONTRACT_READY
-} from '../constants';
-
-// definitely needs to be redux thunk
-export const exchangeContractReady = (symbol, exchangeContract) => ({
-  type: EXCHANGE_CONTRACT_READY,
-  payload: { [symbol]: exchangeContract }
-});

src/actions/tokenContract-actions.js

-import {
-  TOKEN_CONTRACT_READY
-} from '../constants';
-
-// again, needs to be redux thunk
-export const tokenContractReady = (symbol, tokenContract) => ({
-  type: TOKEN_CONTRACT_READY,
-  payload: { [symbol]: tokenContract }
-});

src/components/Exchange.js

@@ -2,8 +2,8 @@ import React, { Component }from 'react';
 import SelectToken from './SelectToken';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { setInteractionState, setExchangeType } from '../actions/web3-actions';
-import { setExchangeInputValue, setExchangeOutputValue, setExchangeRate, setExchangeFee, setInputToken, setOutputToken, setInputBalance, setOutputBalance, setAllowanceApprovalState } from '../actions/exchange-actions';
+import { setInteractionState, setExchangeType } from '../ducks/web3';
+import { setExchangeInputValue, setExchangeOutputValue, setExchangeRate, setExchangeFee, setInputToken, setOutputToken, setInputBalance, setOutputBalance, setAllowanceApprovalState } from '../ducks/exchange';
 
 class Exchange extends Component {
   onInputChange = async (event) => {

src/components/Invest.js

@@ -14,7 +14,7 @@ import { setInvestToken,
          setUserShares,
          setInvestEthRequired,
          setInvestTokensRequired,
-         setInvestChecked} from '../actions/exchange-actions';
+         setInvestChecked} from '../ducks/exchange';
 
 class Invest extends Component {
 

src/components/NetworkStatus.js

@@ -2,7 +2,7 @@ import React, { Component }from 'react';
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { subscribe } from 'redux-subscriber';
-import { setWeb3ConnectionStatus, setInteractionState, setNetworkMessage, metamaskLocked } from '../actions/web3-actions';
+import { setWeb3ConnectionStatus, setInteractionState, setNetworkMessage, metamaskLocked } from '../ducks/web3';
 
 class NetworkStatus extends Component {
   componentDidMount(){

src/components/Purchase.js

 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux';
-import { setBlockTimestamp, setInteractionState } from '../actions/web3-actions';
-import { setExchangeInputValue, setExchangeOutputValue } from '../actions/exchange-actions';
+import { setBlockTimestamp, setInteractionState } from '../ducks/web3';
+import { setExchangeInputValue, setExchangeOutputValue } from '../ducks/exchange';
 
 class Purchase extends Component {
   purchaseTokens = async () => {

src/components/SharePurchase.js

 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux';
-import { setBlockTimestamp, setInteractionState } from '../actions/web3-actions';
-import { setExchangeInputValue, setExchangeOutputValue } from '../actions/exchange-actions';
+import { setBlockTimestamp, setInteractionState } from '../ducks/web3';
+import { setExchangeInputValue, setExchangeOutputValue } from '../ducks/exchange';
 
 class Purchase extends Component {
   buyOrSellShares = async () => {

src/reducers/exchangeContract-reducer.js → src/ducks/exchange-contract.js

@@ -2,6 +2,12 @@ import {
   EXCHANGE_CONTRACT_READY
 } from '../constants'
 
+// definitely needs to be redux thunk
+export const exchangeContractReady = (symbol, exchangeContract) => ({
+  type: EXCHANGE_CONTRACT_READY,
+  payload: { [symbol]: exchangeContract }
+});
+
 export default (state = {}, action) => {
   const { payload } = action;
   switch(action.type) {

src/reducers/exchange-reducer.js → src/ducks/exchange.js

@@ -26,6 +26,132 @@ import {
   SET_INVEST_CHECKED
 } from '../constants';
 
+
+export const setInputBalance = (inputBalance) => ({
+  type: SET_INPUT_BALANCE,
+  inputBalance
+});
+
+export const setOutputBalance = (outputBalance) => ({
+  type: SET_OUTPUT_BALANCE,
+  outputBalance
+})
+
+export const setInputToken = (inputToken) => ({
+  type: SET_INPUT_TOKEN,
+  inputToken
+});
+
+export const setOutputToken = (outputToken) => ({
+  type: SET_OUTPUT_TOKEN,
+  outputToken
+});
+
+export const setEthPool1 = (ethPool1) => ({
+  type: SET_ETH_POOL_1,
+  ethPool1
+});
+
+export const setEthPool2 = (ethPool2) => ({
+  type: SET_ETH_POOL_2,
+  ethPool2
+});
+
+export const setTokenPool1 = (tokenPool1) => ({
+  type: SET_TOKEN_POOL_1,
+  tokenPool1
+});
+
+export const setTokenPool2 = (tokenPool2) => ({
+  type: SET_TOKEN_POOL_2,
+  tokenPool2
+});
+
+export const setAllowanceApprovalState = (allowanceApproved) => ({
+  type: SET_ALLOWANCE_APPROVAL_STATE,
+  allowanceApproved
+});
+
+export const setExchangeInputValue = (inputValue) => ({
+  type: SET_EXCHANGE_INPUT_VALUE,
+  inputValue
+});
+
+export const setExchangeOutputValue = (outputValue) => ({
+  type: SET_EXCHANGE_OUTPUT_VALUE,
+  outputValue
+});
+
+export const setExchangeRate = (rate) => ({
+  type: SET_EXCHANGE_RATE,
+  rate
+});
+
+export const setExchangeFee = (fee) => ({
+  type: SET_EXCHANGE_FEE,
+  fee
+});
+
+export const setInvestToken = (investToken) => ({
+  type: SET_INVEST_TOKEN,
+  investToken
+});
+
+export const setInvestEthPool = (investEthPool) => ({
+  type: SET_INVEST_ETH_POOL,
+  investEthPool
+});
+
+export const setInvestTokenPool = (investTokenPool) => ({
+  type: SET_INVEST_TOKEN_POOL,
+  investTokenPool
+});
+
+export const setInvestShares = (investShares) => ({
+  type: SET_INVEST_SHARES,
+  investShares
+});
+
+export const setUserShares = (userShares) => ({
+  type: SET_USER_SHARES,
+  userShares
+});
+
+export const setInvestTokenBalance = (investTokenBalance) => ({
+  type: SET_INVEST_TOKEN_BALANCE,
+  investTokenBalance
+});
+
+export const setInvestEthBalance = (investEthBalance) => ({
+  type: SET_INVEST_ETH_BALANCE,
+  investEthBalance
+});
+
+export const setInvestTokenAllowance = (investTokenAllowance) => ({
+  type: SET_INVEST_TOKEN_ALLOWANCE,
+  investTokenAllowance
+});
+
+export const setInvestSharesInput = (investSharesInput) => ({
+  type: SET_INVEST_SHARES_INPUT,
+  investSharesInput
+});
+
+export const setInvestEthRequired = (investEthRequired) => ({
+  type: SET_INVEST_ETH_REQUIRED,
+  investEthRequired
+});
+
+export const setInvestTokensRequired = (investTokensRequired) => ({
+  type: SET_INVEST_TOKENS_REQUIRED,
+  investTokensRequired
+});
+
+export const setInvestChecked = (investChecked) => ({
+  type: SET_INVEST_CHECKED,
+  investChecked
+});
+
 export default (state = {}, action) => {
   const {
     inputBalance,

src/reducers/index.js → src/ducks/index.js

 import { combineReducers } from 'redux';
 // import global from './global-reducer';
-import web3Store from './web3-reducer';
-import exchangeContracts from './exchangeContract-reducer';
-import tokenContracts from './tokenContract-reducer';
-import exchange from './exchange-reducer';
+import web3Store from './web3';
+import exchangeContracts from './exchange-contract';
+import tokenContracts from './token-contract';
+import exchange from './exchange';
 
 export default combineReducers({
   web3Store,

src/reducers/tokenContract-reducer.js → src/ducks/token-contract.js

@@ -2,6 +2,12 @@ import {
   TOKEN_CONTRACT_READY
 } from '../constants';
 
+// again, needs to be redux thunk
+export const tokenContractReady = (symbol, tokenContract) => ({
+  type: TOKEN_CONTRACT_READY,
+  payload: { [symbol]: tokenContract }
+});
+
 export default (state = {}, action) => {
   const { payload } = action;
   switch(action.type) {

src/actions/web3-actions.js → src/ducks/web3.js

+// these will take in an action, have a default state set in the arguments and return a new state
 import {
-  INITIALIZE_GLOBAL_WEB3,
   SET_WEB3_CONNECTION_STATUS,
   SET_CURRENT_MASK_ADDRESS,
   METAMASK_LOCKED,
@@ -9,10 +9,12 @@ import {
   SET_NETWORK_MESSAGE,
   SET_BLOCK_TIMESTAMP,
   SET_EXCHANGE_TYPE,
+  INITIALIZE_GLOBAL_WEB3,
   TOGGLE_ABOUT,
   TOGGLE_INVEST
 } from '../constants';
 
+
 // this actions folder is actually full of action creators
 // your asynchronous calls are going to be in redux-thunk style action creators
 
@@ -106,3 +108,35 @@ export const initializeGlobalWeb3 = (web3) => ({
   type: INITIALIZE_GLOBAL_WEB3,
   web3
 });
+
+
+export default (state = {}, action) => {
+  const { connected, currentMaskAddress, metamaskLocked, interaction, factoryContract, networkMessage, timestamp, exchangeType, web3, aboutToggle, investToggle } = action
+  switch (action.type) {
+    case INITIALIZE_GLOBAL_WEB3:
+      return Object.assign({}, state, { web3: web3 });
+    case SET_WEB3_CONNECTION_STATUS:
+      return Object.assign({}, state, { connected: connected });
+    case SET_CURRENT_MASK_ADDRESS:
+      return Object.assign({}, state, { currentMaskAddress: currentMaskAddress });
+    case METAMASK_LOCKED:
+      return Object.assign({}, state, { metamaskLocked: metamaskLocked });
+    case METAMASK_UNLOCKED:
+      return Object.assign({}, state, { metamaskLocked: metamaskLocked });
+    case SET_INTERACTION_STATE:
+      return Object.assign({}, state, { interaction: interaction });
+    case FACTORY_CONTRACT_READY:
+      return Object.assign({}, state, { factoryContract: factoryContract});
+    case SET_NETWORK_MESSAGE:
+      return Object.assign({}, state, { networkMessage: networkMessage });
+    case SET_BLOCK_TIMESTAMP:
+      return Object.assign({}, state, { blockTimestamp: timestamp });
+    case SET_EXCHANGE_TYPE:
+      return Object.assign({}, state, { exchangeType: exchangeType });
+    case TOGGLE_ABOUT:
+      return Object.assign({}, state, { aboutToggle: aboutToggle })
+    case TOGGLE_INVEST:
+      return Object.assign({}, state, { investToggle: investToggle })
+    default: return state;
+  }
+}

src/reducers/web3-reducer.js

-// these will take in an action, have a default state set in the arguments and return a new state
-import {
-  SET_WEB3_CONNECTION_STATUS,
-  SET_CURRENT_MASK_ADDRESS,
-  METAMASK_LOCKED,
-  METAMASK_UNLOCKED,
-  SET_INTERACTION_STATE,
-  FACTORY_CONTRACT_READY,
-  SET_NETWORK_MESSAGE,
-  SET_BLOCK_TIMESTAMP,
-  SET_EXCHANGE_TYPE,
-  INITIALIZE_GLOBAL_WEB3,
-  TOGGLE_ABOUT,
-  TOGGLE_INVEST
-} from '../constants';
-
-export default (state = {}, action) => {
-  const { connected, currentMaskAddress, metamaskLocked, interaction, factoryContract, networkMessage, timestamp, exchangeType, web3, aboutToggle, investToggle } = action
-  switch (action.type) {
-    case INITIALIZE_GLOBAL_WEB3:
-      return Object.assign({}, state, { web3: web3 });
-    case SET_WEB3_CONNECTION_STATUS:
-      return Object.assign({}, state, { connected: connected });
-    case SET_CURRENT_MASK_ADDRESS:
-      return Object.assign({}, state, { currentMaskAddress: currentMaskAddress });
-    case METAMASK_LOCKED:
-      return Object.assign({}, state, { metamaskLocked: metamaskLocked });
-    case METAMASK_UNLOCKED:
-      return Object.assign({}, state, { metamaskLocked: metamaskLocked });
-    case SET_INTERACTION_STATE:
-      return Object.assign({}, state, { interaction: interaction });
-    case FACTORY_CONTRACT_READY:
-      return Object.assign({}, state, { factoryContract: factoryContract});
-    case SET_NETWORK_MESSAGE:
-      return Object.assign({}, state, { networkMessage: networkMessage });
-    case SET_BLOCK_TIMESTAMP:
-      return Object.assign({}, state, { blockTimestamp: timestamp });
-    case SET_EXCHANGE_TYPE:
-      return Object.assign({}, state, { exchangeType: exchangeType });
-    case TOGGLE_ABOUT:
-      return Object.assign({}, state, { aboutToggle: aboutToggle })
-    case TOGGLE_INVEST:
-      return Object.assign({}, state, { investToggle: investToggle })
-    default: return state;
-  }
-}

src/store/store.dev.js

 import { applyMiddleware, compose, createStore } from 'redux';
-import reducer from '../reducers';
+import reducer from '../ducks';
 import thunk from 'redux-thunk'
 import initSubscriber from 'redux-subscriber';
 import initialState from './initial-state';