減少樣板代碼在redux中關于 reduce重構的應用

FWHeart 發布于2019-08-23 16:19 / 532人閱讀

摘要：原始代碼省略了內容從技術上將，我們甚至不關心之前的狀態使用樣板代碼后不在需要語句，有些代碼潔癖很討厭使用和的條件判斷，使用樣板代碼后可以使得代碼可以配置省略了內容省略了內容省略了內容

原始代碼

// 省略了內容
function updateObject(oldObject, newValues) {}
function updateItemInArray(array, itemId, updateItemCallback) {}



function setVisibilityFilter(visibilityState, action) {
    // 從技術上將，我們甚至不關心之前的狀態
    return action.filter;
}

function visibilityReducer(visibilityState = "SHOW_ALL", action) {
    switch(action.type) {
        case "SET_VISIBILITY_FILTER" : return setVisibilityFilter(visibilityState, action);
        default : return visibilityState;
    }
};


function addTodo(todosState, action) {
    const newTodos = todosState.concat({
        id: action.id,
        text: action.text,
        completed: false
    });

    return newTodos;
}

function toggleTodo(todosState, action) {
    const newTodos = updateItemInArray(todosState, action.id, todo => {
        return updateObject(todo, {completed : !todo.completed});
    });

    return newTodos;
}

function editTodo(todosState, action) {
    const newTodos = updateItemInArray(todosState, action.id, todo => {
        return updateObject(todo, {text : action.text});
    });

    return newTodos;
}

function todosReducer(todosState = [], action) {
    switch(action.type) {
        case "ADD_TODO" : return addTodo(todosState, action);
        case "TOGGLE_TODO" : return toggleTodo(todosState, action);
        case "EDIT_TODO" : return editTodo(todosState, action);
        default : return todosState;
    }
}

function appReducer(state = initialState, action) {
    return {
        todos : todosReducer(state.todos, action),
        visibilityFilter : visibilityReducer(state.visibilityFilter, action)
    };
}

使用樣板代碼后不在需要switch語句，有些代碼潔癖很討厭使用if和switch的條件判斷，使用樣板代碼后可以使得代碼可以配置

// 省略了內容
function updateObject(oldObject, newValues) {}
function updateItemInArray(array, itemId, updateItemCallback) {}

function createReducer(initialState, handlers) {
  return function reducer(state = initialState, action) {
    if (handlers.hasOwnProperty(action.type)) {
      return handlers[action.type](state, action)
    } else {
      return state
    }
  }
}


// 省略了內容
function setVisibilityFilter(visibilityState, action) {}

const visibilityReducer = createReducer("SHOW_ALL", {
    "SET_VISIBILITY_FILTER" : setVisibilityFilter
});

// 省略了內容
function addTodo(todosState, action) {}
function toggleTodo(todosState, action) {}
function editTodo(todosState, action) {}

const todosReducer = createReducer([], {
    "ADD_TODO" : addTodo,
    "TOGGLE_TODO" : toggleTodo,
    "EDIT_TODO" : editTodo
});

function appReducer(state = initialState, action) {
    return {
        todos : todosReducer(state.todos, action),
        visibilityFilter : visibilityReducer(state.visibilityFilter, action)
    };
}

云服務器 GPU云服務器 php中關于的運算代碼重構 java應用于大數據大數據在科學的應用

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

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

Redux 的問題：React、MobX 和 Realm 能解決嗎？

摘要：它是由一個非常聰明的人開發的，用來緩解在單頁面應用中管理狀態的問題。的問題沒有一種適合所有場景的完美工具。為設計的是世界的另一個新增內容，但目前僅適用于。這將導致最后期限延長，并且留下更多需要我們維護的代碼。原文：The Problems with Redux: Can React, MobX, and Realm save us? 作者：Erich Reich 首先，我不討厭 ...

snifes 2019-08-21 16:41 評論0 收藏0
【譯】Redux 還是 Mobx，讓我來解決你的困惑！

摘要：我現在寫的這些是為了解決和這兩個狀態管理庫之間的困惑。這甚至是危險的，因為這部分人將無法體驗和這些庫所要解決的問題。這肯定是要第一時間解決的問題。函數式編程是不斷上升的范式，但對于大部分開發者來說是新奇的。規模持續增長的應原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

txgcwm 2019-08-22 11:06 評論0 收藏0
我是如何一步步“改造”redux的

摘要：但是在使用開發的過程中還是感覺不太順手，本文將闡述我是如何對進行一步步改造以適應個人和團隊開發需求的。所以說，我們如何在保證的設計原則以及項目規范性上，對其進行簡化改造，是我這里需要解決的問題。從Vue換到React+Redux進行開發已經有半年多的時間，總的來說體驗是很好的，對于各種邏輯和業務組件的抽象實在是方便的不行，高階組件，洋蔥模型等等給我帶來了很多編程思想上的提升。但是在使...

jemygraw 2019-08-22 17:31 評論0 收藏0
Rematch: Redux 的重新設計

摘要：沿著管道有兩組偵聽器中間件和訂閱。中間件是可以偵聽傳入的動作的函數，支持諸如，或偵聽器之類的工具。將視為一個帶有更新前更新后鉤子的全局對象，以及能夠以簡單的方式合成新狀態。應將兩者視為一體，并且不再需要文件導出類型的字符串。難道現在狀態管理不是一個可以解決的問題嗎?直觀地說，開發人員似乎知道一個隱藏的事實:狀態管理的使用似乎比需要的更困難。在本文中，我們將探討一些你可能一直在問自己的...

Taste 2019-08-26 13:47 評論0 收藏0
React 新 Context API 在前端狀態管理的實踐

摘要：本文轉載至今日頭條技術博客眾所周知，的單向數據流模式導致狀態只能一級一級的由父組件傳遞到子組件，在大中型應用中較為繁瑣不好管理，通常我們需要使用來幫助我們進行管理，然而隨著的發布，新成為了新的選擇。本文轉載至：今日頭條技術博客showImg(https://segmentfault.com/img/bVbiNJO?w=900&h=383);眾所周知，React的單向數據流模式導致狀態...

wing324 2019-08-02 11:51 評論0 收藏0