DAY25:flux想解決什麼問題?

react以撰寫components可重覆利用組合而成新頁面，但所有資料都是包在元件之中，元件只能透過setState來改變state狀態，元件相互溝通時只能靠著props去進行傳遞，如果多個元件互相傳遞或層級傳遞變得極為複雜，更新資料又是層層更新，flux設計模式就是為了解決這樣子的問題。

component只能透過setState改變state，但我們能透過傳遞方法到child元件來改變parent元件的state，這就是我想表達的層層傳遞，層層更新會變得很混雜。

src/Parent.js

import React, { Component } from ‘react’;
import Child from ‘./Child’;

class Parent extends React.Component {
constructor(props) {
super(props);
this.handleFn = this.handleFn.bind(this);
this.state = {parentval: “parent”};
}

handleFn(param) {
this.setState({parentval: param});
};

render() {
return (
<div>
<h1>{this.state.parentval}</h1>
<Child fn={this.handleFn}/>
</div>
);
}
}

export default Parent;
src/Child.js

import React, { Component } from ‘react’;

class Child extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.state = {parentval: “parent”};
}

handleClick() {
this.props.fn(‘Change-Parent-State’);
}

render() {
return <h1 onClick={this.handleClick}>child</h1>;
}
}

export default Child;
Flux Parts

Dispatcher
Store
Action
View
Flux官網示意圖(單向資料流)