在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
2,
处理就是reducer.js
总结就是, ColorBar 改变数据, App 随着数据的改变而界面发生改变就这么简单!