用Redux更新整個狀態的方法是什麼？

我有一個空的state對象，它在應用程序啓動時使用默認空字段實例化。其中包含一個名爲users的空數組。用Redux更新整個狀態的方法是什麼？

const state = { 
        users: [] 
       }

在開始時，我發送了一些命令給服務器和服務器，然後發送數據作爲響應。

因爲我需要填充users，我想我只想用從服務器接收到的新數組替換整個用戶數組。

我讀到，你在採取當前狀態，應用一些變化，並返回一個新的狀態。當我想，說，更改用戶密碼，然後我會叫這樣一個行動聽起來不錯：

{ 
    action: 'CHANGE_PASSWORD', 
    user: 'john', 
    password: 'karamba', 
}

它將由調度員，其中用戶john將在當前狀態下可以找到管理和密碼將被替換爲新密碼。

但是，這是正確的情況下，我想加載一些初始數據？

如果是這樣，動作將如何？

{ 
    action: 'FETCH_USERS' 
}

然後減速器會替換整個users數組？

來源

2017-03-16 Sergei Basharov

讓只是涉及到一些第一

一個應用程序中的所有狀態的改變都存儲在一個單一的對象狀態樹基礎。
此狀態樹需要是不可變的。
無論何時您需要更新（替換）您需要分派動作的狀態，此動作事件都必須由reducer捕獲以替換您的狀態。
動作是平面JS對象，描述狀態/應用程序的最小變化。它必須有一個TYPE屬性。
UI組件不會自己知道如何進行更改。他們所知道的是他們需要派遣一項行動。
Pure函數 - 返回值完全取決於參數的值，沒有副作用（網絡或數據庫調用），idempotent（相同的參數始終可預測性返回相同的值），它們不會修改傳遞給他們
Reducer - 是一個純函數，它接受應用程序和動作的整個狀態並返回應用程序的下一個狀態（確保不修改當前狀態，它必須返回一個新對象），並具有以下方法簽名：(State,Action) => State;

那麼，您的操作對於異步流（您從網絡請求中檢索數據的位置）的外觀如何？當您使用異步流程時需要使用某種類型的中間件http://redux.js.org/docs/advanced/Middleware.html。

在下面的操作中，我使用了一個名爲thunk的中間件。

actions.js：

export function receiveAllProducts(users){ 
    return { 
     type: 'RECEIVED_ALL_USERS', 
     users: users 
    } 
} 


export function fetchALLUserData(){ 
    return thunkLoadAllUserData; 
} 


const thunkLoadAllUserData = (dispatch) => { 
     let users = []; 
     users = //Some network request to get data 
     dispatch(receivedAllUserData(users)); 
    }); 
}

所以，你會派遣一個動作fetchALLUserData，（對於異步流Redux的中間件），它返回一個thunk函數來獲取用戶，然後調用receivedAllUserData行動，作爲一個類型：'RECEIVED_ALL_USERS'。這種類型是由Reducer捕獲的，它使用純函數和Object.assign返回新狀態（使用新用戶）。

減速機純功能是什麼樣的？ reducers.js：

const initialState = {} 

export default (currentState = initialState, action = {}) => { 


    switch (action.type) { 

    case 'RECEIVED_ALL_USERS': 
     return Object.assign({}, currentState, { 
     users: action.users, 
     }); 
    case 'RECEIVE_ALL_PRODUCTS': 
     return Object.assign({}, currentState, { 
     productsAsObject: action.productsObject, 
     }); 

    // ...other actions 

    default: 
     return currentState; 
    } 
}

的Object.assign（）方法被用於從一個或多個源對象中所有可枚舉自己的屬性的值複製到目標對象。，因此將複製整個currentState和覆蓋您的用戶提供了獲取用戶

另外，您還可以使用對象蔓延運營商更新狀態屬性：http://redux.js.org/docs/recipes/UsingObjectSpreadOperator.html

來源

2017-03-16 13:26:30

你減速器應該替換users裏面props。然後本地state內componentWillReceiveProps方法，指定本地狀態從使用this.setState{users: @nextProps.users}

來源

2017-03-16 12:59:06

道具如果您需要在應用程序啓動上您的狀態設置的東西，檢查瞭如何store和createStore作品改變。當您通過preloadedState屬性時，它會將其傳遞給您的縮減器。

如果您在應用程序執行過程中更改users數組，使用AJAX調用或類似的東西，可以使用動作來完成它。

因此，您可能會發送REQUEST_USERS操作。此操作將向您的服務器發送一個AJAX請求，並在此請求的成功和錯誤回調中調用REQUEST_USERS_SUCCESS和REQUEST_USERS_FAILURE操作，其中有效負載是新用戶或錯誤消息。

有關如何使用redux正確處理AJAX請求的更多信息，請參閱here。

來源

2017-03-16 13:05:24

用Redux更新整個狀態的方法是什麼？

回答

相關問題