資訊專欄INFORMATION COLUMN
摘要：前言在系列從一個簡單例子了解里面，我們已經(jīng)對的核心概念做了必要的講解。接下來，同樣是通過一個簡單的例子，來講解如何將跟應(yīng)用結(jié)合起來。接下來就看實際例子，一個簡單到不存在實用價值的。這部分會在后續(xù)展開
前言
在《Redux系列01：從一個簡單例子了解action、store、reducer》里面，我們已經(jīng)對redux的核心概念做了必要的講解。接下來，同樣是通過一個簡單的例子，來講解如何將redux跟react應(yīng)用結(jié)合起來。
我們知道，在類flux框架設(shè)計中，單向數(shù)據(jù)流轉(zhuǎn)的方向無非如下：
轉(zhuǎn)換成redux的語言，就是這個樣子。接下來就看實際例子，一個簡單到不存在實用價值的todo list。
例子：實際運行效果本文的代碼示例可以在github上下載，點擊查看。README里有詳細(xì)的運行步驟，照著做就可以了，這里也一起貼出來。
首先安裝依賴項
npm install
如果還沒安裝browserify，那么也要安裝一下
npm install -g browserify
然后，在當(dāng)前目錄運行如下腳本
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為參數(shù)，創(chuàng)建store。
storevar store = Redux.createStore(todoReducer);將react跟store進行綁定
最后，到關(guān)鍵步驟啦，可以看到：
在getInitialState里：通過store.getState()獲取數(shù)據(jù)進行初始的渲染。
在componentDidMount里：監(jiān)聽store的狀態(tài)變化，當(dāng)狀態(tài)變化時，觸發(fā)onChange回調(diào)。
在handleAdd里：通過store.dispatch(addTodoActions(value))修改state。（步驟二對這個進行了監(jiān)聽）
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 (
{this.state.items.map(function(item){
return - {item.text}
;
})}
);
}
});
ReactDOM.render(
寫在后面
整個例子看下來其實非常flux style，非常簡單，連異步都沒有涉及，所以也就不花過多篇幅進行講解，相信看下代碼，跑下文中的demo就可以理解了。
實際項目不可能像文中的這么簡單，所以一般redux還要結(jié)合react-redux、redux-thunk等庫使用，才能用到實戰(zhàn)中去。這部分會在后續(xù)展開 :)
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/78372.html
摘要：正如我們前面的教程所提到的，在組件之間流通數(shù)據(jù)更確切的說，這被叫做單向數(shù)據(jù)流數(shù)據(jù)沿著一個方向從父組件流到子組件。這就是如何使數(shù)據(jù)流變得更簡單的原因。它是一種傾向單向數(shù)據(jù)流比如的設(shè)計模式。這是因為總是接受和返回狀態(tài)用來更新。 前言 近期接觸React項目，學(xué)到許多新知識點，網(wǎng)上教程甚多，但大多都把知識點分開來講，初學(xué)者容易陷入學(xué)習(xí)的誤區(qū)，摸不著頭腦，本人在學(xué)習(xí)中也遇到許多坑。此篇文章是筆...
摘要：要求通過要求數(shù)據(jù)變更函數(shù)使用裝飾或放在函數(shù)中，目的就是讓狀態(tài)的變更根據(jù)可預(yù)測性單向數(shù)據(jù)流。同一份數(shù)據(jù)需要響應(yīng)到多個視圖，且被多個視圖進行變更需要維護全局狀態(tài)，并在他們變動時響應(yīng)到視圖數(shù)據(jù)流變得復(fù)雜，組件本身已經(jīng)無法駕馭。今天是 520，這是本系列最后一篇文章，主要涵蓋 React 狀態(tài)管理的相關(guān)方案。 前幾篇文章在掘金首發(fā)基本石沉大海, 沒什么閱讀量. 可能是文章篇幅太長了？掘金值太低了？ ...
摘要：原文地址沒想到這篇文章這么晚才出，最近發(fā)生了太多的事情，已致于心態(tài)全無，最終也離開了現(xiàn)在的公司，沒想到是這么的狼狽一個人的光芒可以放到很大也可以小到微乎其微，如果不能好好的規(guī)劃最終也只能默默的承受世上沒有相同的感同身受，感受真實才能真正的 原文地址：https://gmiam.com/post/react-... 沒想到這篇文章這么晚才出，最近發(fā)生了太多的事情，已致于心態(tài)全無，最終也離...
摘要：是前端開發(fā)領(lǐng)域新興的方法論體系，它繼承了與編程理念，在技術(shù)上有不少創(chuàng)新。但專利與開源協(xié)議是平行的兩個世界，改底層也不大容易解決問題。此外，要求在中結(jié)合各屬性的是否變化，判斷是否該觸發(fā)更新。 ReRest (Reactive Resource State Transfer) 是前端開發(fā)領(lǐng)域新興的方法論體系，它繼承了 MVVM 與 FRP 編程理念，在技術(shù)上有不少創(chuàng)新。本文從專利稿修改而來...
閱讀 3032·2021-11-24 10:32
閱讀 689·2021-11-24 10:19
閱讀 5171·2021-08-11 11:17
閱讀 1471·2019-08-26 13:31
閱讀 1270·2019-08-23 15:15
閱讀 2294·2019-08-23 14:46
閱讀 2281·2019-08-23 14:07
閱讀 1111·2019-08-23 14:03
