前端之家收集整理的这篇文章主要介绍了
redux-demo，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
demo1
@H_
404_2@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:
@H_
404_2@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:
@H_
404_2@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:
@H_
404_2@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:
@H_
404_2@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:
@H_
404_2@const createActionObj = {
actionColorRed: function(){
return {
type:'RED',colorAttribute: 'red',bgColorAttribute: 'yellow'
}
},actionColorBlue: function(){
return {
type:'BLUE',colorAttribute: 'blue',bgColorAttribute: '#000'
}
}
}
export default createActionObj;
原文链接：https://www.f2er.com/react/303901.html
