Redux integration

README.md

@@ -8,7 +8,7 @@ Ensure web3 is available before your app loads.
 and ensures it doesn't render until web3 is available. It also renders a nice
 message to the user to guide them in the following cases:
 
-1. The user does is not using a web3-capable browser, or
+1. The user is not using a web3-capable browser, or
 2. The user has web3 support, but their account is locked (their ETH address is inaccessible)
 
 Along with the above, `<Web3Provider />` also:
@@ -51,13 +51,15 @@ import PropTypes from 'prop-types';
 
 function SomeComponent(props, context) {
   const web3Context = context.web3;
-  //
-  // web3Context = {
-  //   accounts: {Array<string>} - All accounts
-  //   selectedAccount: {string} - Default ETH account address (coinbase)
-  //   network: {string} - One of 'MAINNET', 'ROPSTEN', or 'UNKNOWN'
-  //   networkId: {string} - The network ID (e.g. '1' for main net)
-  // }
+
+  /**
+   * web3Context = {
+   *   accounts: {Array<string>} - All accounts
+   *   selectedAccount: {string} - Default ETH account address (coinbase)
+   *   network: {string} - One of 'MAINNET', 'ROPSTEN', or 'UNKNOWN'
+   *   networkId: {string} - The network ID (e.g. '1' for main net)
+   * }
+   */
 
   return (
     <div>
@@ -79,7 +81,7 @@ export default SomeComponent;
 
   * **`onChangeAccount`:** Callback which is called when the user switches to
   a new account. Callback will receive the new ETH address as an argument.
-  * **`we3UnavailableScreen`:** React component to override the screen that is
+  * **`web3UnavailableScreen`:** React component to override the screen that is
   shown when web3 is unavailable.
   * **`accountUnavailableScreen`:** React component to override the screen that
   is shown when the user's wallet is locked.
@@ -93,3 +95,36 @@ export default SomeComponent;
   accountUnavailableScreen={SomeComponent}
 />
 ```
+
+### Redux Support
+
+If you're using `react-redux`, then you most likely have a `<Provider />`
+component at the very root of your app. If this is the case, `<Web3Provider />`
+will dispatch the following actions to you redux store:
+
+* **`web3/RECEIVE_ACCOUNT`:** Dispatched the first time an ETH account is
+available.
+* **`web3/CHANGE_ACCOUNT`:** Dispatched when the user switches between accounts.
+
+Both actions provide the ETH address at `action.address`;
+
+#### Example Usage:
+
+```js
+// In your reducer:
+function reducer(state, action) {
+  switch(action.type) {
+    case 'web3/RECEIVE_ACCOUNT':
+      return {
+        ...state,
+        ethAddress: action.address
+      };
+
+    case 'web3/CHANGE_ACCOUNT':
+      return {
+        ...state,
+        ethAddress: action.address
+      };
+  }
+}
+```