redux 最简单的调色板

在redux 框架中，其实就有一个概念就是全局的数据

只要你通过 connect 函数连接一下，那么你就能拿到全局的数据1，

2, 同时还可以发送指令，那么非常牛了

只要数据更改了，那么数据对应的视图自动会刷新，

那么写起来就比较流畅了！

好。我们看我们的调色板！

架构环境搭配就不弄，参考上两篇！

webpack 会编译 main.js 到all.js 中，然后index.html 会引用 all.js 这是基本逻辑，所以下面我们就重点关注

main.js

import React from "react";
import {render} from "react-dom";
import {createStore} from 'redux';
//引入组件
import App from "./App.js";
// import News from './News.js';
//使用、挂载组件，两个参数
//第一个参数是jsx语法
//第二个参数表示组件挂在哪里
import reducer from './reducer.js';
import {Provider} from 'react-redux';

let store = createStore(reducer);
render(
	<Provider store = {store}>
		<App></App> 	
	</Provider>
	, 
	document.getElementById("app-container")
);

上面就没啥讲的了

看App.js

import React , {Component} from "react";

import {connect} from "react-redux";

import {bindActionCreators} from "redux";
import * as actions from "./actions.js";
import ColorBar from './ColorBar';

class App extends Component {

	render(){
		return (
			<div>
				<div className="box" style={{backgroundColor:`rgb(${this.props.r},${this.props.g},${this.props.b})`}}>

				</div>	


				<ColorBar color="r" />

				<ColorBar color="g" />
				
				<ColorBar color="b" />
			



			</div>	
		);
	}
}

export default connect(
	(state) => {
		return {
			r:state.r,
			g:state.g,
			b:state.b			
		}
	},
	(dispatch) => {
		return {
		 actions : bindActionCreators(actions,dispatch)
		}
	}
)(App);

连接store 持有全局的数据！

全局数据就在

reducer.js


let bg = {
	"r" : 120 , "g" : 255 , "b" : 0
}
export default (state = bg , action) => {

	if(state == undefined){
		state = bg;
	}

	if(action.type=="CHVAL"){
		 // console.log(action);
		 var color = action.color;
		 var value = action.value;
		 if(color=='r'){
			state =  {
				...state,
				r:value
			} 	
		 }else if(color=="g"){
		 		state =  {
				...state,
				g:value
			} 	
		 }else if(color=='b'){
		 	state =  {
				...state,
				b:value
			} 	
		 }

		
	}

	return state;
}

state 就是个简单的Json！

App 中没啥说的，就是state 数据变，小div 背景颜色就跟着变！

下面我就看颜色控制条了， App 给它传递了一个color ,就表明它能控制哪个颜色！

ColorBar.js

import React from 'react';
import * as actions from "./actions.js";

import {bindActionCreators} from "redux";

import {connect} from 'react-redux';


class ColorBar extends React.Component{


	getVal(){
		return this.props.state[this.props.color];
	}


	handleChange(){
		var value = this.refs.txt.value;
		 this.props.actions.changeval(this.props.color,value);

	}
	render(){
		return (
				// <div>
				// 	
				// </div>
				<div>
					

					<input type="range" ref="txt" min = "0" max = "255" value={this.getVal()} onChange={(this.handleChange).bind(this)}/>
					<input type="number" value={(this.getVal())}  min = "0" max="255"/>
				</div>

				
		);
	}
}


export default connect(
	(state)=>{
		return {
			state:state
		}
	},

	(dispatch)=>{
		return {
			actions : bindActionCreators(actions,dispatch)
		}
	}

)(ColorBar);

ColorBar 逻辑也不多，1 ， connect 连接了store

处理就是reducer.js

总结就是, ColorBar 改变数据， App 随着数据的改变而界面发生改变就这么简单！

redux 最简单的调色板

猜你喜欢