redux-demo

demo1

import React from 'react';
import $ from 'jquery'; 
import { createStore } from 'redux';

const initialState = {
    color: 'red'
}
const colorReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'RED' : 
            return { color: 'red'}
        case 'BLUE' : 
            return { color: 'blue'}
        case 'TOGGLE' :
            return state.color === 'red' ? {color:'blue'} : {color:'red'}
        default :
            return initialState;
    }
}

let store = createStore(colorReducer);

const renderValue = () => {
    console.log('store.getState().color:'+store.getState().color);
    $('#colorEl').css('color', store.getState().color); 
}    

store.subscribe(renderValue);

export default class MyRedux extends React.Component {
    componentDidMount(){
        renderValue();
    }
    render() {
        return (
            <div style={{margin:'50px'}}>
                  <p id="colorEl">Watch my color change!</p>
                <button id="red" onClick={() => store.dispatch({ type: 'RED' })}>RED</button>
                <button id="blue" onClick={() => store.dispatch({ type: 'BLUE' })}>BLUE</button>
                <button id="toggle" onClick={() => store.dispatch({ type: 'TOGGLE' })}>TOGGLE</button>
            </div>
        )
    }    
}

demo2

MyRedux.js:

import React from 'react';
import $ from 'jquery'; 
import { createStore } from 'redux';
import reducers from './reducers';

let store = createStore(reducers);

const renderValue = () => {
    $('#colorEl').css({'color': store.getState().changeColor.color,
                        'backgroundColor': store.getState().changeBgColor.bgColor}); 
}    

store.subscribe(renderValue);

export default class MyRedux extends React.Component {
    componentDidMount(){
        renderValue();
    }
    render() {
        return (
            <div style={{margin:'50px'}}>
                  <p id="colorEl">Watch my color change!</p>
                <button id="red" onClick={() => store.dispatch({ type: 'RED' })}>RED</button>
                <button id="blue" onClick={() => store.dispatch({ type: 'BLUE' })}>BLUE</button>
                <button id="toggle" onClick={() => store.dispatch({ type: 'TOGGLE' })}>TOGGLE</button>
            </div>
        )
    }    
}

reducers.js:

import { combineReducers } from 'redux';

const initialState = {
    color: 'red'
}
const initialBgState = {
    bgColor: '#ff0'
}

function changeColor(state = initialState, action) {
     switch(action.type) {
        case 'RED' : 
            return { color: 'red'}
        case 'BLUE' : 
            return { color: 'blue'}
        case 'TOGGLE' :
            return state.color === 'red' ? {color:'blue'} : {color:'red'}
        default :
            return initialState;
    }
}
function changeBgColor(state = initialBgState, action) {
     switch(action.type) {
        case 'RED' : 
            return { bgColor: '#ff0'}
        case 'BLUE' : 
            return { bgColor: '#000'}
        case 'TOGGLE' :
            return state.bgColor === '#000' ? {bgColor:'#ff0'} : {bgColor:'#000'}
        default :
            return initialBgState;
    }
}

export default combineReducers({
    changeColor,
    changeBgColor
})

demo3

MyRedux.js:

import React from 'react';
import $ from 'jquery'; 
import { createStore } from 'redux';
import reducers from './reducers';
import createActionObj from './createAction';

let store = createStore(reducers);

const renderValue = () => {
    $('#colorEl').css({'color': store.getState().changeColorReducer.color,
                        'backgroundColor': store.getState().changeColorReducer.bgColor}); 
}

store.subscribe(renderValue);

export default class MyRedux extends React.Component {
    componentDidMount(){
        renderValue();
    }
    render() {
        return (
            <div style={{margin:'50px'}}>
                  <p id="colorEl">Watch my color change!</p>
                <button id="red" onClick={() => store.dispatch(createActionObj.actionColorRed())}>RED</button>
                <button id="blue" onClick={() => store.dispatch(createActionObj.actionColorBlue())}>BLUE</button>
                <button id="toggle" onClick={() => store.dispatch({ type: 'TOGGLE' })}>TOGGLE</button>
            </div>
        )
    }    
}

reducers.js:

import { combineReducers } from 'redux';

const myReducers = {
    changeColorReducer: function(state = {color:'red',bgColor:'yellow'}, action) {
        console.log('state:'+JSON.stringify(state));
        switch(action.type) {
            case 'RED' : 
                return { ...state, color: action.colorAttribute,bgColor:action.bgColorAttribute }
            case 'BLUE' : 
                return { ...state, color: action.colorAttribute,bgColor:action.bgColorAttribute }
            case 'TOGGLE' :
                return state.color === 'red' ? {color:'blue',bgColor:'#000'} : {color:'red',bgColor:'yellow'}
            default :
                return state;
        }
    },
    otherReducer: function(state = {}, action) {
        switch(action.type) {
             
            default :
                return state;
        }
    }
};

export default combineReducers(myReducers)

createAction.js:

const createActionObj = {
    actionColorRed: function(){
        return {
            type:'RED',
            colorAttribute: 'red',
            bgColorAttribute: 'yellow'
        }
        
    },
    actionColorBlue: function(){
        return {
            type:'BLUE',
            colorAttribute: 'blue',
            bgColorAttribute: '#000'
        }
    }
}

export default createActionObj;