redux簡單使用

WalkerXu 發布于2019-08-19 17:51 / 1158人閱讀

摘要：方法是會在連接組件的時候隨著組件的傳遞到各個組件的，所以組件內都是可以用的。如何跟一起使用請參考文檔這邊并不進行詳細講解，以為這不是這篇文章的重點，以后會多帶帶在其他文章中進行講解。

在react火熱的年代，flux作為fb提出的最適合react的數據模型，時下有非常多的實現。
而redux作為在眾多的flux地實現中脫穎而出，及其精簡的代碼，卻能帶來實用的功能，正好自己的項目中要用，所以讓我們來分析redux

為什么要寫這個文檔呢，因為我看官方文檔各種看不懂啊，琢磨了半天都不理解，最后是去看了源碼才看明白
因為他的一些概念沒搞清楚的話，就不知道他的文檔在說什么。為了不讓更多的人掉坑里面，這里稍微解釋一些概念。

學習redux需要知道redux的三個部分：

action

reducer

store

action

redux中得action就是你自己定義的一個動作，什么是動作？你可以理解為用戶的動作你做出的反應，最簡單地例子就是當你進行分頁的時候，
跳到特定的頁數這個動作。我們可以通過類似如下的代碼定義action：

/*
 * action types
 */
 
export const ADD_TODO = "ADD_TODO";
export const COMPLETE_TODO = "COMPLETE_TODO";
export const SET_VISIBILITY_FILTER = "SET_VISIBILITY_FILTER";

/*
 * other constants
 */

export const VisibilityFilters = {
  SHOW_ALL: "SHOW_ALL",
  SHOW_COMPLETED: "SHOW_COMPLETED",
  SHOW_ACTIVE: "SHOW_ACTIVE"
};

/*
 * action creators
 */

export function addTodo(text) {
  return { type: ADD_TODO, text };
}

export function completeTodo(index) {
  return { type: COMPLETE_TODO, index };
}

export function setVisibilityFilter(filter) {
  return { type: SET_VISIBILITY_FILTER, filter };
}

在這里定義action之后用來出發的，通過dispatch方法來觸發動作，在這里action只是一些常亮的定義。
dispatch方法接收的參數是一個object，而且object必須包含一個type屬性，告訴我們需要執行的操作。
而對象里面的包含的其他屬性則可以在執行動作的時候用作其他用途。

dispatch方法是會在store連接組件的時候隨著組件的props傳遞到各個組件的，所以組件內都是可以用的。

reducer

這是在redux里面提出來的概念，具體啥含義請參考官網，因為我也解釋不清楚╮(╯▽╰)╭

reducer在這里是核心，因為redux是只有一個store的，所以整個app的狀態和數據都存儲在一個store里面，
如果所有狀態變化都在store里面進行邏輯操作，那么這個store肯定是無法維護的，所以在這里我們把狀態的變化放到了reducer里面。
我們先來看一下如何定義一個reducer：

import { combineReducers } from "redux";
import { ADD_TODO, COMPLETE_TODO, SET_VISIBILITY_FILTER, VisibilityFilters } from "./actions";
const { SHOW_ALL } = VisibilityFilters;

function visibilityFilter(state = SHOW_ALL, action) {
  switch (action.type) {
  case SET_VISIBILITY_FILTER:
    return action.filter;
  default:
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case ADD_TODO:
    return [...state, {
      text: action.text,
      completed: false
    }];
  case COMPLETE_TODO:
    return [
      ...state.slice(0, action.index),
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

const todoApp = combineReducers({
  visibilityFilter,
  todos
});

export default todoApp;

如你所見，reducer只是一個方法，在reducer里面根據傳入的action里面的type進行不同的state地操作。
在這里必須理解一點，在你調用dispatch方法的時候傳入的action動作就是reducer里面接受的action

在這里我們唯一用到redux的功能只有combineReducers方法，這個方法的作用是把不同的reducer合并到一起，
因為在創建store的時候我們只能傳入一個reducer，但是我們不可能把所有邏輯操作寫到一個reducer里面，所以這邊提供了這個方法。

store

store的作用即是整合所有的reducer，然后提供一些幫助方法，例如dispatch等方法讓我們使用，
代碼如下：

let store = createStore(reducer);

是的，就是這么簡單。

如何跟react一起使用

請參考文檔
這邊并不進行詳細講解，以為這不是這篇文章的重點，以后會多帶帶在其他文章中進行講解。

理解

如何理解redux的重點就在于，redux如何處理整個數據流的走向。
基本的思路如下：

component --dispatch(action)--> reducer --update(state)--> store --update(props)--> component

這就是整個數據的走向

看到這里，你們肯定跟我有相同的想法：reducer到底是個什么東西！

那么我們就來理解一下

我們看一下reducer的定義：

function todos(state = [], action) {
  switch (action.type) {
  case ADD_TODO:
    return [...state, {
      text: action.text,
      completed: false
    }];
  case COMPLETE_TODO:
    return [
      ...state.slice(0, action.index),
      Object.assign({}, state[action.index], {
        completed: true
      }),
      ...state.slice(action.index + 1)
    ];
  default:
    return state;
  }
}

首先他接受兩個參數，一個是state，一個是action。

action我們知道是在dispatch的時候傳入的告訴我們進行什么操作的，那么state是什么？
state就是store里面存著的狀態，即數據。我們可以看到每個reducer都會返回state，而這些state最終都會保存在store里面。

**每次觸發一個action的時候，store調用reducer，同時傳入本身保存著的state，reducer根據傳入的state和action返回新的state，
store更新state，返回以props的方式傳入組件，這就形成了整個數據流循環**

以上是redux的最基礎使用，這也是redux的核心，然后后面還有一堆redux的擴展以及中間件進行學習，這僅僅是一個開始，以后還有更長的路要走^_^

GPU云服務器云服務器簡單使用 Redux redux源碼 redux-saga

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

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

Rematch: Redux 的重新設計

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

Taste 2019-08-26 13:47 評論0 收藏0
重新設計 Redux

摘要：相關狀態父組件傳遞給子組件的狀態。外部狀態狀態是可以從視圖庫中移出來的，然后可以使用提供者消費者模式把狀態重新連接回視圖庫。重新設計在我看來，重寫是有其必要性的，至少有以下個方面可以改進得更友好。 Redux 學習起來很困難？寫起代碼來很啰嗦？一起來看看 Rematch 的作者對 Redux 的思考和簡化吧~ 原文：《Redesigning Redux》, Shawn McKay 都過...

kidsamong 2019-08-22 18:06 評論0 收藏0
React生態，dva源碼閱讀

摘要：下面會從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個子頁面對應一個文件。總結上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關生態的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯的，大大提升了開發效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態管理,以及Redux-saga中...

bergwhite 2019-08-30 15:55 評論0 收藏0
React生態，dva源碼閱讀

摘要：下面會從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個子頁面對應一個文件。總結上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關生態的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯的，大大提升了開發效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態管理,以及Redux-saga中...

txgcwm 2019-08-23 14:57 評論0 收藏0
React生態，dva源碼閱讀

摘要：下面會從淺到深，淡淡在閱讀源碼過程中自己的理解。分拆子頁面后，每一個子頁面對應一個文件。總結上面就是最早版本的源碼，很簡潔的使用了等其目的也很簡單簡化相關生態的繁瑣邏輯參考源碼地址 ??dva的思想還是很不錯的，大大提升了開發效率，dva集成了Redux以及Redux的中間件Redux-saga,以及React-router等等。得益于Redux的狀態管理,以及Redux-saga中...

harryhappy 2019-08-02 14:10 評論0 收藏0
redux-saga框架使用詳解及Demo教程

摘要：通過創建將所有的異步操作邏輯收集在一個地方集中處理，可以用來代替中間件。 redux-saga框架使用詳解及Demo教程前面我們講解過redux框架和dva框架的基本使用，因為dva框架中effects模塊設計到了redux-saga中的知識點，可能有的同學們會用dva框架，但是對redux-saga又不是很熟悉，今天我們就來簡單的講解下saga框架的主要API和如何配合redux框...

Nosee 2019-08-23 11:49 評論0 收藏0