一步一步學習 ReactNative + Redux(3.2:優(yōu)化,消除魔術字段)

寫在開始

記得本示例中的過濾條件有三個 All 种柑、Undo 岗仑、Finish。
我們不止在一處使用了這些字符串聚请,他們與我們的程序聯(lián)系非常緊密荠雕,耦合度太高,并且可能發(fā)展為泛濫驶赏。
如果以后有需求炸卑,要對條件進行修改。我們需要一一找到煤傍,對其進行修改盖文。這無疑是一個繁瑣的過程,并且容易出錯蚯姆。
所以五续,我們需要把它定義在一處,在其他地方進行引用龄恋,這樣疙驾,如果修改需求不是特別大,我們只做一處修改篙挽,就能使全部生效荆萤。
這樣镊靴,我們將魔術字段消除了O晨ā!偏竟!

源碼:https://github.com/eylu/web-lib/tree/master/ReactReduxDemo/app_step3.2

消除魔術字段

1煮落、定義變量

我們需要定義個變量,它是一個對象形式踊谋,有三個key ALL蝉仇、UNDOFINISH,對應值為All轿衔、Undo沉迹、Finish,還要將其導出

新建 ReactReduxDemo/app/config/enum.js 文件害驹,如下:

/**
 * TODO 所有的過濾狀態(tài)
 * @type {Object}
 */
export const FILITER_KEYS = {
    ALL: 'All',
    UNDO: 'Undo',
    FINISH: 'Finish',
};

2鞭呕、修改初始數(shù)據(jù)

ReactReduxDemo/app/index.js 文件,修改如下:

import React, { Component } from 'react';
import {
    View,
    StyleSheet,
} from 'react-native';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

import { FILITER_KEYS } from './config/enum';        // 引用變量
import reducers from './reducers/index';

import HomeContainer from './containers/home.container';

// 這是初始數(shù)據(jù)
const initState = {
    todos: [
        {id:1,title:'吃早飯',status:true},
        {id:2,title:'打籃球',status:false},
        {id:3,title:'修電腦',status:false},
    ],
    filter: FILITER_KEYS.ALL,                       // 修改初始數(shù)據(jù)宛官,使用變量的key
};

let store = createStore(reducers, initState);

export default class RootWrapper extends Component{
    render(){
        return (
            <Provider store={store}>
                <View style={styles.wrapper}>
                    <HomeContainer />
                </View>
            </Provider>
        );
    }
}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1,
        marginTop: 20,
    },
});

3葫松、修改子組件TodoFilterComponent

ReactReduxDemo/app/components/todo-filter.component.js 文件,修改如下:

import React, { Component } from 'react';
import {
    View,
    Text,
    TouchableOpacity,
    StyleSheet,
} from 'react-native';

import { FILITER_KEYS } from '../config/enum';               // 引用變量

export default class TodoFilterComponent extends Component{
    constructor(props){
        super(props);
    }

    filterTodo(filter){
        this.props.filterTodo && this.props.filterTodo(filter);
    }

    renderFilter(filter){
        if(filter==this.props.filter){
            return (
                <Text style={[styles.filter,styles.filterCurrent]}>{filter}</Text>
            );
        }
        return (
            <TouchableOpacity onPress={()=>{this.filterTodo(filter)}}>
                <Text style={styles.filter}>{filter}</Text>
            </TouchableOpacity>
        );
    }

    render(){
        return (
            <View style={styles.wrapper}>
                {this.renderFilter(FILITER_KEYS.ALL)}       // 使用變量的 key (注釋會報錯底洗,請刪除注釋)
                {this.renderFilter(FILITER_KEYS.UNDO)}      // 使用變量的 key (注釋會報錯腋么,請刪除注釋)
                {this.renderFilter(FILITER_KEYS.FINISH)}    // 使用變量的 key (注釋會報錯,請刪除注釋)
            </View>
        );
    }
}


const styles = StyleSheet.create({
    wrapper: {
        flexDirection: 'row',
        paddingLeft: 20,
        paddingTop: 20,
    },
    filter: {
        marginRight: 20,
        textDecorationLine: 'underline',
    },
    filterCurrent:{
        color: 'gray',
        textDecorationLine: 'none',
    },
});

4亥揖、修改容器組件HomeContainer

import React, { Component } from 'react';
import {
    View,
    Text
} from 'react-native';
import { connect } from 'react-redux';

import { FILITER_KEYS } from '../config/enum';             // 引用變量
import { changeTodoStatus, addNewTodo, filterTodoList } from '../actions/index';

import TodoFormComponent from '../components/todo-form.component';
import TodoListComponent from '../components/todo-list.component';
import TodoFilterComponent from '../components/todo-filter.component';

class HomeContainer extends Component{
    constructor(props){
        super(props);
    }

    addTodo(text){
        let { dispatch } = this.props;
        dispatch(addNewTodo(text));
    }

    toggleTodo(id){
        let { dispatch } = this.props;
        dispatch(changeTodoStatus(id));
    }

    filterTodo(filter){
        let { dispatch } = this.props;
        dispatch(filterTodoList(filter));
    }

    render(){
        return (
            <View>
                <TodoFormComponent addTodo={(text)=>{this.addTodo(text)}} />
                <TodoListComponent todoList={this.props.todoList} toggleTodo={(id)=>{this.toggleTodo(id)}} />
                <TodoFilterComponent filter={this.props.currentFilter} filterTodo={(filter)=>{this.filterTodo(filter)}} />
            </View>
        );
    }
}

const getFilterTodos = (todos, filter) => {
  switch (filter) {
    case FILITER_KEYS.ALL:                             // 使用變量 key
      return todos;
    case FILITER_KEYS.UNDO:                            // 使用變量 key
      return todos.filter( todo => !todo.status);
    case FILITER_KEYS.FINISH:                          // 使用變量 key
      return todos.filter( todo => todo.status);
    default:
      throw new Error('Unknown filter: ' + filter);
  }
}

// 基于全局 state 珊擂,哪些 state 是我們想注入的 props
function mapStateToProps(state){
    var list = getFilterTodos(state.todos, state.filter);
    return {
        todoList: list,
        currentFilter: state.filter,
    }
}

export default connect(mapStateToProps)(HomeContainer);

運行項目,看看是否正常運行徐块?是的未玻,它在展示與操作上沒什么區(qū)別。

Paste_Image.png

我們對條件名稱進行簡單修改 All => AllTodo胡控、Undo => UnTodo扳剿、Finish => OverTodo
ReactReduxDemo/app/config/enum.js 文件,修改如下:

/**
 * TODO 所有的過濾狀態(tài)
 * @type {Object}
 */
export const FILITER_KEYS = {
    ALL: 'AllTodo',         // All => AllTodo
    UNDO: 'UnTodo',         // Undo => UnTodo
    FINISH: 'OverTodo',     // Finish => OverTodo
};

運行項目昼激,看看是否過濾條件已經(jīng)修改了呢庇绽,點擊試試,沒啥問題橙困。

Paste_Image.png
Paste_Image.png
最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瞧掺,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子凡傅,更是在濱河造成了極大的恐慌辟狈,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,324評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件夏跷,死亡現(xiàn)場離奇詭異哼转,居然都是意外死亡,警方通過查閱死者的電腦和手機槽华,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評論 3 392
  • 文/潘曉璐 我一進店門壹蔓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人猫态,你說我怎么就攤上這事佣蓉∨悖” “怎么了?”我有些...
    開封第一講書人閱讀 162,328評論 0 353
  • 文/不壞的土叔 我叫張陵勇凭,是天一觀的道長疚膊。 經(jīng)常有香客問我,道長虾标,這世上最難降的妖魔是什么酿联? 我笑而不...
    開封第一講書人閱讀 58,147評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮夺巩,結(jié)果婚禮上贞让,老公的妹妹穿的比我還像新娘。我一直安慰自己柳譬,他們只是感情好喳张,可當我...
    茶點故事閱讀 67,160評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著美澳,像睡著了一般销部。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上制跟,一...
    開封第一講書人閱讀 51,115評論 1 296
  • 那天舅桩,我揣著相機與錄音,去河邊找鬼雨膨。 笑死擂涛,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的聊记。 我是一名探鬼主播撒妈,決...
    沈念sama閱讀 40,025評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼排监!你這毒婦竟也來了狰右?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,867評論 0 274
  • 序言:老撾萬榮一對情侶失蹤舆床,失蹤者是張志新(化名)和其女友劉穎棋蚌,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挨队,經(jīng)...
    沈念sama閱讀 45,307評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡谷暮,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,528評論 2 332
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了瞒瘸。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坷备。...
    茶點故事閱讀 39,688評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡熄浓,死狀恐怖情臭,靈堂內(nèi)的尸體忽然破棺而出省撑,到底是詐尸還是另有隱情,我是刑警寧澤俯在,帶...
    沈念sama閱讀 35,409評論 5 343
  • 正文 年R本政府宣布竟秫,位于F島的核電站,受9級特大地震影響跷乐,放射性物質(zhì)發(fā)生泄漏肥败。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,001評論 3 325
  • 文/蒙蒙 一愕提、第九天 我趴在偏房一處隱蔽的房頂上張望馒稍。 院中可真熱鬧,春花似錦浅侨、人聲如沸纽谒。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽鼓黔。三九已至,卻和暖如春不见,著一層夾襖步出監(jiān)牢的瞬間澳化,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1 268
  • 我被黑心中介騙來泰國打工稳吮, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留缎谷,地道東北人。 一個月前我還...
    沈念sama閱讀 47,685評論 2 368
  • 正文 我出身青樓灶似,卻偏偏與公主長得像慎陵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子喻奥,可洞房花燭夜當晚...
    茶點故事閱讀 44,573評論 2 353

推薦閱讀更多精彩內(nèi)容