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,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;

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!