17 | Total clicks on increment: {clickCounter} times
18 |
19 |
20 | )
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/ducks/multiplyAll.js:
--------------------------------------------------------------------------------
1 | import {operationReducerFactory} from 'redux-operations';
2 | import {INCREMENT_COUNTER} from './counter';
3 |
4 | const initialState = 0;
5 | export const multiplyAll = operationReducerFactory('multiplyAll', initialState, {
6 | INCREMENT_COUNTER: {
7 | //priority must be higher so it comes later than the origination click and update
8 | priority: 100,
9 | resolve: (state, action)=> {
10 | return action.meta.operations.results.counter.state * action.meta.operations.results.clickCounter.state;
11 | },
12 | description: 'All counters clicked multiplied by value of last counter clicked'
13 | }
14 | });
15 |
--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack')
2 | var webpackDevMiddleware = require('webpack-dev-middleware')
3 | var webpackHotMiddleware = require('webpack-hot-middleware')
4 | var config = require('./webpack.config')
5 |
6 | var app = new (require('express'))()
7 | var port = 3000
8 |
9 | var compiler = webpack(config)
10 | app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }))
11 | app.use(webpackHotMiddleware(compiler))
12 |
13 | app.get("/", function(req, res) {
14 | res.sendFile(__dirname + '/index.html')
15 | })
16 |
17 | app.get('/randomnumber', function(req, res) {
18 | setTimeout(() => {
19 | const randomNumber = "" + parseInt(Math.random() * 100);
20 | res.send(randomNumber);
21 | }, 1000)
22 | })
23 |
24 | app.listen(port, function(error) {
25 | if (error) {
26 | console.error(error)
27 | } else {
28 | console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
29 | }
30 | })
31 |
--------------------------------------------------------------------------------
/components/AddDynamicCounters.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import {walkState} from 'redux-operations';
3 | import Counter from './Counter';
4 | import {connect} from 'react-redux';
5 |
6 |
7 | const mapStateToProps = state => {
8 | return {
9 | numberOfCounters: state.numberOfCounters
10 | }
11 | };
12 |
13 | @connect(mapStateToProps)
14 | export default class AddDynamicCounters extends Component {
15 | render() {
16 | const { numberOfCounters } = this.props;
17 | const counterArr = [];
18 | for (let i = 0; i < numberOfCounters; i++) {
19 | counterArr.push(i);
20 | }
21 | return (
22 |
23 |
24 | {numberOfCounters ?
ALL THE COUNTERS
: null}
25 |
{counterArr.map(val => this.renderCounter(val))}
26 |
27 | )
28 | }
29 | renderCounter = (counterIdx) => {
30 | return ;
31 | };
32 | }
33 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2016 Matt Krick
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/components/Counter.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react'
2 | import {walkState, bindOperationToActionCreators} from 'redux-operations';
3 | import {actionCreators, counter as counterReducer} from '../ducks/counter';
4 | import {connect} from 'react-redux';
5 |
6 | const mapStateToProps = (state, props) => {
7 | return {
8 | counter: props.location ? walkState(props.location, state, counterReducer) : state.counter
9 | }
10 | };
11 |
12 | @connect(mapStateToProps)
13 | export default class Counter extends Component {
14 | render() {
15 | const { location, counter, dispatch} = this.props;
16 | const {increment, decrement, incrementIfOdd,
17 | incrementAsync, setFromFetch, setCounter} = bindOperationToActionCreators(location, counterReducer, actionCreators);
18 | return (
19 |