🛳 Code shipped !!

Author: joshuaquek

.gitignore

@@ -0,0 +1,3 @@
+.next
+node_modules
+*.log

README.md

@@ -1,2 +1,22 @@
-# redux-multiple-states-nextjs
+# Multiple Redux States in single NodeJS web application
+
+## Description
 A prototype built with React, Redux, and NextJS (for routing) that shows how one can do CRUD to multiple state trees within a single webapp. Uses fast-redux, now you don't need to use constants for action types to match actions with reducers, as compared to conventional redux.
+
+## Setup
+
+  Install NPM modules:
+  `npm install`
+
+## Running
+
+  To run in development mode that supports hot reloading:
+  `npm run dev`
+
+  To run in production mode:
+  `npm start`
+
+## Analyse how the modules are bundled
+
+  Run:
+  `npm run analyze`

config/redux.js

@@ -0,0 +1,12 @@
+import { createStore, applyMiddleware } from 'redux'
+import { composeWithDevTools } from 'redux-devtools-extension'
+import thunkMiddleware from 'redux-thunk'
+import withRedux from 'next-redux-wrapper'
+import { rootReducer } from 'fast-redux'
+
+export const initStore = (initialState = {}) => {
+  return createStore(rootReducer, initialState,
+    composeWithDevTools(applyMiddleware(thunkMiddleware)))
+}
+
+export const reduxPage = (comp) => withRedux(initStore)(comp)

containers/about.js

@@ -0,0 +1,36 @@
+// NextJs Stuff
+import Link from 'next/link'
+
+// Redux stuff required for later
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+
+// Import in your state(s)
+import { getHomepageState, bumpBuild } from '../states/treeOne'
+import { getAboutpageState, bumpVersion } from '../states/treeTwo'
+
+// HTML / JSX Code:
+const About = ({ version, gender, build, bumpVersion }) => (
+  <div>
+    <h1>About Us</h1>
+    <h3>Current VERSION: {version}</h3>
+    <h3>Current BUILD: {build}</h3>
+    <h2>hello {gender}</h2>
+    <p><button onClick={(e) => bumpVersion(1)}>Bump version only!</button></p>
+    <Link href='/'><a>Homepage</a></Link>
+  </div>
+)
+
+// Mapping State Variables and Actions to Props:
+function mapStateToProps(state) {
+  let stateOne = getHomepageState(state)
+  let stateTwo= getAboutpageState(state, 'version', 'gender')
+  let combinedState = { ...stateOne, ...stateTwo} // This is the part where we can merge the two states and use it as a combined state
+  return combinedState
+}
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ bumpVersion }, dispatch)
+}
+
+// Export Container to be used in Pages:
+export default connect(mapStateToProps, mapDispatchToProps)(About)

containers/homepage.js

@@ -0,0 +1,30 @@
+// NextJs Stuff
+import Link from 'next/link'
+
+// Redux stuff required for later
+import {bindActionCreators} from 'redux'
+import {connect} from 'react-redux'
+
+// Import in only one state tree this time
+import { getHomepageState, bumpBuild } from '../states/treeOne'
+
+// HTMl / JSX  code:
+const Homepage = ({ build, bumpBuild }) => (
+  <div>
+    <h1>Homepage</h1>
+    <h3>CURRENT build: {build}</h3>
+    <p><button onClick={(e) => bumpBuild(1)}>Bump build!</button></p>
+    <Link href='/about'><a>About Us</a></Link>
+  </div>
+)
+
+// Mapping State Variables and Actions to Props:
+function mapStateToProps (state) {
+  return getHomepageState(state)
+}
+function mapDispatchToProps (dispatch) {
+  return bindActionCreators({ bumpBuild }, dispatch)
+}
+
+// Export Container to be used in Pages:
+export default connect(mapStateToProps, mapDispatchToProps)(Homepage)

next.config.js

@@ -0,0 +1,18 @@
+// This is for running an analyser for development purposes.
+// To use this, run 'npm run analyse' in your terminal.
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')
+const { ANALYZE } = process.env
+
+module.exports = {
+  webpack: function (config) {
+    if (ANALYZE) {
+      config.plugins.push(new BundleAnalyzerPlugin({
+        analyzerMode: 'server',
+        analyzerPort: 8888,
+        openAnalyzer: true
+      }))
+    }
+
+    return config
+  }
+}