add sample with more complexe/complete redux use

examples/complexe/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/env"]
+}

examples/complexe/README.md

@@ -0,0 +1,5 @@
+# complexe case
+
+
+- multiple reducer
+- parameter pass to action

examples/complexe/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "counter",
+  "version": "1.0.0",
+  "main": "src/index.js",
+  "author": "Titouan CREACH",
+  "license": "MIT",
+  "scripts": {
+    "start": "parcel ./src/index.html",
+    "build": "parcel build ./src/index.html"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.4",
+    "parcel-bundler": "^1.12.3",
+    "redux": "^3.7.2",
+    "vue": "^2.6.10"
+  },
+  "dependencies": {}
+}

examples/complexe/src/Actions/index.js

@@ -0,0 +1,20 @@
+import { INCREMENT, DECREMENT, RESET, OTHER, OTHER_RESET } from './types.js'
+export function increment() {
+  return { type: INCREMENT }
+}
+
+export function decrement() {
+  return { type: DECREMENT }
+}
+
+export function reset(count3) {
+  return { type: RESET, count3 }
+}
+
+export function other(count5) {
+  return { type: OTHER, count5 }
+}
+
+export function other_reset() {
+  return { type: OTHER_RESET }
+}

examples/complexe/src/Actions/types.js

@@ -0,0 +1,5 @@
+export const INCREMENT = 'INCREMENT'
+export const DECREMENT = 'DECREMENT'
+export const RESET = 'RESET'
+export const OTHER = 'OTHER'
+export const OTHER_RESET = 'OTHER_RESET'

examples/complexe/src/Components/Counter.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <h1>{{ title }}</h1>
+    <div>count1={{ counterValue }} count2={{ counterValue2 }}</div>
+    <button @click="actions.increment()">increment</button>
+    <button @click="actions.decrement()">decrement</button>
+    <button @click="actions.reset(0)">reset</button>
+    <br />
+    <div>other count {{ counterValue3 }}</div>
+    <button @click="actions.other(54)">other</button>
+    <button @click="actions.other_reset()">other_reset</button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['actions', 'counterValue', 'counterValue2', 'counterValue3', 'title'],
+}
+</script>

examples/complexe/src/Components/CounterProvider.vue

@@ -0,0 +1,53 @@
+<template>
+  <Provider
+    :mapDispatchToProps="mapDispatchToProps"
+    :mapStateToProps="mapStateToProps"
+    :store="store"
+  >
+    <template
+      #default="{ counterValue, counterValue2, counterValue3, actions }"
+    >
+      <Counter
+        :counterValue="counterValue"
+        :counterValue2="counterValue2"
+        :counterValue3="counterValue3"
+        :actions="actions"
+        :title="title"
+      />
+    </template>
+  </Provider>
+</template>
+
+<script>
+import { bindActionCreators } from 'redux'
+import Provider from '../../../../bundle.js'
+import Counter from './Counter.vue'
+import * as Actions from '../Actions'
+import store from '../configure_store'
+
+export default {
+  methods: {
+    mapStateToProps(state) {
+      return {
+        counterValue: state.counter.count,
+        counterValue2: state.counter.count2,
+        counterValue3: state.counter2.count6,
+      }
+    },
+
+    mapDispatchToProps(dispatch) {
+      return { actions: bindActionCreators(Actions, dispatch) }
+    },
+  },
+  components: {
+    Counter,
+    Provider,
+  },
+  data() {
+    return {
+      store,
+      title: 'Counter using vuejs-redux',
+    }
+  },
+}
+</script>

examples/complexe/src/Reducers/Counter.js

@@ -0,0 +1,14 @@
+import { INCREMENT, DECREMENT, RESET } from '../Actions/types'
+
+export function counter(state = { count: 0, count2: 19 }, action) {
+  switch (action.type) {
+    case INCREMENT:
+      return { count: state.count + state.count2, count2: state.count2 }
+    case DECREMENT:
+      return { count: state.count - 1, count2: state.count2 }
+    case RESET:
+      return { count: action.count3, count2: state.count2 }
+    default:
+      return state
+  }
+}

examples/complexe/src/Reducers/Counter_second.js

@@ -0,0 +1,12 @@
+import { OTHER, OTHER_RESET } from '../Actions/types'
+
+export function counter2(state = { count6: 44 }, action) {
+  switch (action.type) {
+    case OTHER:
+      return { count6: action.count5 }
+    case OTHER_RESET:
+      return { count6: 44 }
+    default:
+      return state
+  }
+}

examples/complexe/src/configure_store.js

@@ -0,0 +1,11 @@
+import { createStore, combineReducers } from 'redux'
+
+import { counter } from './Reducers/Counter'
+import { counter2 } from './Reducers/Counter_second'
+const rootReducerSample = combineReducers({
+  counter,
+  counter2,
+})
+
+const store = createStore(rootReducerSample)
+export default store

examples/complexe/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Counter</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="index.js"></script>
+  </body>
+</html>

examples/complexe/src/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import CounterProvider from './Components/CounterProvider.vue'
+
+new Vue({
+  components: { CounterProvider },
+  render: h => h(CounterProvider),
+}).$mount('#app')