Redux系列02：一個炒雞簡單的react+redux例子

前言

在《Redux系列01：從一個簡單例子了解action、store、reducer》里面，我們已經對redux的核心概念做了必要的講解。接下來，同樣是通過一個簡單的例子，來講解如何將redux跟react應用結合起來。

我們知道，在類flux框架設計中，單向數據流轉的方向無非如下：

轉換成redux的語言，就是這個樣子。接下來就看實際例子，一個簡單到不存在實用價值的todo list。

例子：實際運行效果

本文的代碼示例可以在github上下載，點擊查看。README里有詳細的運行步驟，照着做就可以了，這里也一起貼出來。

首先安裝依賴項

npm install

如果還沒安裝browserify，那么也要安裝一下

npm install -g browserify

然后，在當前目錄運行如下腳本

browserify app.js -o bundle/app.js -t [ babelify --presets [ es2015 react ] ]

在瀏覽器里打開index.html，就可以看到效果了。運行效果如下，很挫吧。。。

例子：實際代碼

由於代碼實在太簡單，這里就直接貼出來了。

actionCreator

首先，定義actionCreator。

// action creator
var addTodoActions = function(text){
	return {
		type: 'add_todo',
		text: text
	};
};

reducer

然后，定義reducer，可以看到是對add_todo事件進行了處理

// reducers
var todoReducer = function(state, action){
	
	if(typeof state === 'undefined'){
		return [];
	}
	
	switch(action.type){
		case 'add_todo':
			return state.slice(0).concat({
				text: action.text,
				completed: false
			});
			break;
		default:
			return state;
	}
};

接着，以前面定義的reducer為參數，創建store。

store

var store = Redux.createStore(todoReducer);

將react跟store進行綁定

最后，到關鍵步驟啦，可以看到：

1. 在getInitialState里：通過store.getState()獲取數據進行初始的渲染。
2. 在componentDidMount里：監聽store的狀態變化，當狀態變化時，觸發onChange回調。
3. 在handleAdd里：通過store.dispatch(addTodoActions(value))修改state。（步驟二對這個進行了監聽）
   4.在onChange里：獲取最新的state，並重新渲染視圖

var App = React.createClass({
	getInitialState: function(){
		return {
			items: store.getState()
		};
	},
	componentDidMount: function(){
		var unsubscribe = store.subscribe(this.onChange);
	},
	onChange: function(){
		this.setState({
			items: store.getState()
		});
	},
	handleAdd: function(){
		var input = ReactDOM.findDOMNode(this.refs.todo);
		var value = input.value.trim();

		if(value)
			store.dispatch(addTodoActions(value));

		input.value = '';
	},
	render: function(){
		return (
			<div>
				<input ref="todo" type="text" placeholder="輸入todo項" style={{marginRight:'10px'}} />
				<button onClick={this.handleAdd}>點擊添加</button>
				<ul>
					{this.state.items.map(function(item){
						return <li>{item.text}</li>;
					})}
				</ul>
			</div>			
			);
	}
});

ReactDOM.render(
	<App />, 
	document.getElementById('container')
	);

寫在后面

整個例子看下來其實非常flux style，非常簡單，連異步都沒有涉及，所以也就不花過多篇幅進行講解，相信看下代碼，跑下文中的demo就可以理解了。

實際項目不可能像文中的這么簡單，所以一般redux還要結合react-redux、redux-thunk等庫使用，才能用到實戰中去。這部分會在后續展開 😃