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

hidogs 發布于2019-08-19 17:17 / 3253人閱讀

摘要：前言在系列從一個簡單例子了解里面，我們已經對的核心概念做了必要的講解。接下來，同樣是通過一個簡單的例子，來講解如何將跟應用結合起來。接下來就看實際例子，一個簡單到不存在實用價值的。這部分會在后續展開

前言

在《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進行綁定

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

在getInitialState里：通過store.getState()獲取數據進行初始的渲染。

在componentDidMount里：監聽store的狀態變化，當狀態變化時，觸發onChange回調。

在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 (
            
                
                
                
                    {this.state.items.map(function(item){
                        return {item.text};
                    })}
                
                        
            );
    }
});

ReactDOM.render(
    , 
    document.getElementById("container")
    );

寫在后面

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

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

云服務器 GPU云服務器 react-redux React_Redux_Appointm react-router-redux Redux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/78372.html

React 升級：Redux

摘要：正如我們前面的教程所提到的，在組件之間流通數據更確切的說，這被叫做單向數據流數據沿著一個方向從父組件流到子組件。這就是如何使數據流變得更簡單的原因。它是一種傾向單向數據流比如的設計模式。這是因為總是接受和返回狀態用來更新。前言近期接觸React項目，學到許多新知識點，網上教程甚多，但大多都把知識點分開來講，初學者容易陷入學習的誤區，摸不著頭腦，本人在學習中也遇到許多坑。此篇文章是筆...

garfileo 2019-08-20 15:44 評論0 收藏0
React組件設計實踐總結05 - 狀態管理

摘要：要求通過要求數據變更函數使用裝飾或放在函數中，目的就是讓狀態的變更根據可預測性單向數據流。同一份數據需要響應到多個視圖，且被多個視圖進行變更需要維護全局狀態，并在他們變動時響應到視圖數據流變得復雜，組件本身已經無法駕馭。今天是 520，這是本系列最后一篇文章，主要涵蓋 React 狀態管理的相關方案。前幾篇文章在掘金首發基本石沉大海, 沒什么閱讀量. 可能是文章篇幅太長了？掘金值太低了？ ...

ideaa 2019-05-23 11:48 評論0 收藏0
React系列之 Redux 架構模式

摘要：原文地址沒想到這篇文章這么晚才出，最近發生了太多的事情，已致于心態全無，最終也離開了現在的公司，沒想到是這么的狼狽一個人的光芒可以放到很大也可以小到微乎其微，如果不能好好的規劃最終也只能默默的承受世上沒有相同的感同身受，感受真實才能真正的原文地址：https://gmiam.com/post/react-... 沒想到這篇文章這么晚才出，最近發生了太多的事情，已致于心態全無，最終也離...

xfee 2019-08-20 12:06 評論0 收藏0
重磅：前端 MVVM 與 FRP 的升階實踐 —— ReRest 可視化編程

摘要：是前端開發領域新興的方法論體系，它繼承了與編程理念，在技術上有不少創新。但專利與開源協議是平行的兩個世界，改底層也不大容易解決問題。此外，要求在中結合各屬性的是否變化，判斷是否該觸發更新。 ReRest (Reactive Resource State Transfer) 是前端開發領域新興的方法論體系，它繼承了 MVVM 與 FRP 編程理念，在技術上有不少創新。本文從專利稿修改而來...

Cciradih 2019-08-21 17:12 評論0 收藏0