React Redux Truffle Box (web3 middleware)

This box comes with everything you need to get started with building large-scale decentralized applications. The box includes a truffle project, a react client app with redux to manage state along with the redux devTools to help debug. Checkout projects examples here.

Features

addon : web3 middleware to enhance the redux store with smart contracts' instances and handle async data flow. The web3Middleware allows to connect to the blockchain first. then, dispatch actions
you can complete the .env file in the root folder to set environment variables. This file will be ignored by git, so it is suitable for API keys (such as Infura secrets) and other sensitive stuff. Refer to dotenv documentation for more details.

Usage

Create a new directory and run :

truffle unbox SandyLudosky/react-redux-box

After unboxing

to install all req'd dependencies both in the root and client projects, you can run :

npm run install-pkg

In the main project directory:

truffle develop

Then, in the Truffle developer console:

compile

and then:

migrate

To test your smart contract(s), in truffle's developer console:

test

Now that you have successfully launched your Solidity contract onto your local blockchain, run

npm start

To see your project in the browser, go to http://localhost:3000/

Usage Example :

`client/src/lib/store` : include contracts abi in contracts' array in the contractsOptions

import { createStore, compose, applyMiddleware } from "redux";
import rootReducer from "../reducers";
import web3Middleware from "../middlewares/web3Middleware";
import { SimpleStorage } from "../../contracts";  /* import compiled contracts' json here */

const composeEnhancer =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    trace: true,
    traceLimit: 25,
  }) || compose;

const contracts = [SimpleStorage] /* add contracts json here in array */

const middlewares = applyMiddleware(web3Middleware(contracts)); /* pass array as param in the web3Middleware  */
export default createStore(rootReducer, composeEnhancer(middlewares));

`client/src/lib/actions` : get contracts instances before dispatching actions

 /* get contracts' instance, then dispatch actions  */
export const setValue = (value) => {
  return (dispatch, _, { instances: { SimpleStorage }, admin }) => {  
    dispatch(setValuePending());
    SimpleStorage.methods
      .set(value)
      .send({ from: admin })
      .then((result) => {
        dispatch(setValueSuccess(!result.status));
        dispatch(getValue());
      })
      .catch(setValueError);
  };
};

SandyLudosky/react-redux-box