什麼是 Redux？

Home >> Blog >> 什麼是 Redux？

什麼是 Redux？

您可能多次聽說過 Redux 這個詞，並且想知道 Redux 是什麼？在下面的短視頻和文章中，我將在不到一分鐘的時間內解釋什麼是 Redux

Redux 只是一個存儲應用程序中變量狀態的存儲。Redux 創建了一個與 store 交互的流程和過程，這樣組件就不會只是隨機更新或讀取 store。類似於銀行。這並不意味著你在銀行里有錢，你可以隨時去，打開金庫，取錢。您必須通過某些步驟才能取款。

在本文的其餘部分，我將展示如何創建一個 Redux Hello World，以在將 Redux 添加到 React 之前解釋它是如何工作的。

簡而言之，Redux 是一種管理“狀態”的方式，或者我們可以說它是一種緩存或存儲，可以被所有組件以結構化的方式訪問。它必須通過“Reducer”和“Actions”訪問

在這裡，為了簡單起見，我將只在一個文件中記錄創建 Hello World Redux 的步驟，無需多言。這不是現實世界的做法，但我想解釋事情如何以一種簡單的方式移動而不在文件之間跳轉:)。最終程式碼可以在這裡找到

首先讓我們了解 Redux 是如何工作的（沒有 React）

我將使用 Node.js 腳本來展示 Redux 如何在 Store、Actions 和 Reducers 之間工作

1.安裝redux

npm install --save redux

Redux 是一個獨立的庫。這裡我們只安裝 redux。

2.現在創建一個js文件（我的名為ReduxHelloWorld.js https://github.com/ranyelhousieny/testing-redux/blob/master/src/ReduxHelloWorld.js）

3.導入redux

const redux = require('redux');

4.創建一個基本的reducer

reducer 只不過是一個純函數，它接受 currentState 和 Action 並返回一個新狀態。一個有效的 Reducer 可以返回當前狀態。我們必須在 store 之前創建 Reducer，因為創建 store 需要它

// 1. Create a basic Reducer
const rootReducer = ( currentState = 0, action ) => {
return currentState; };

5.創建商店

// 2. 創建一個存儲
const store = redux.createStore( rootReducer );

商店執行的方法很少。其中之一是 getState()。讓我們將當前狀態寫入控制台並使用“node ReduxHelloWorld.js”運行文件，如下所示：

我們在這裡做了什麼？我們創建了一個 store，它將調用 reducer 並使用初始狀態為零進行初始化。現在讓我們發送一些動作

6.添加reducer動作

reducer只是一個帶有switch語句的函數，根據action.type決定執行哪個動作。讓我們添加一個動作來增加狀態

7.調度動作

我們在 store 上執行的另一種方法是 dispatch 一個 action。

store.dispatch({ type:'INCREMENT' });

通常，它需要一個類型和一個有效負載。但為了簡單起見，我現在只傳遞一個類型。

這是完整的文件和運行它的結果

當然，在現實生活中，狀態將是一個具有多個值和嵌套對象的更複雜的對象，但這是總體思路。這是發生的事情，再次，一步一步

1.我們創建了store並添加了初始值（來自reducer）

2.調度一個Action來增加狀態的值

我希望這能解釋 Redux 的工作原理。現在，讓我們將其映射到 React 中，在下面的文章中見