摘要：去營救有一種方法我們把我們的歸約器分成多個歸約器每個都只負責狀態樹的葉子。此外我們還學習了如何擴展以使用多個歸約器和動作以及多個連接的組件。

本文轉載自：眾成翻譯
譯者：iOSDevLog
鏈接：http://www.zcfy.cc/article/3825
原文：https://www.fullstackreact.com/30-days-of-react/day-20/

使用Redux，我們來談談我們如何在我們的應用中實際修改Redux狀態。

昨天, 我們經歷了整合我們的反應應用與Redux的困難部分。從現在起, 我們將使用我們的Redux設置來定義函數。

現在, 我們的演示應用能顯示當前時間。但目前還沒有任何方法可以更新到新的時間。現在, 讓我們修改這個。

回想一下, 我們能在Redux中改變數據的唯一方法是通過一個動作創建者。昨天我們創建了一個Redux的store, 但我們還沒有為我們的store創造一個更新的方法。

我們 想要 的是我們的用戶通過點擊按鈕來更新時間的能力。為了添加此函數, 我們需要執行以下幾個步驟:

創建一個 actionCreator 來 分發 我們store的動作

調用一個元素的 actionCreator "onClick"

處理歸約器的動作

我們已經實現了第三個步驟, 所以我們還有兩件事要做, 才能讓這個函數像我們預期的那樣工作。

昨天, 我們討論了什么是動作, 但不是真正的為什么我們使用這個東西叫 actionCreators 或他們是什么。

作為復習, 動作是一個_必須_ 包含type 值簡單的對象,。我們創建了一個types.js 文件, 它保存在動作類型常量上, 因此我們可以將這些值用作type 屬性。

export const FETCH_NEW_TIME = "FETCH_NEW_TIME";

作為快速審閱, 我們的動作可以是具有type 鍵的任何對象值。我們可以與我們的行動一起發送數據 (通常, 我們將把額外的數據作為一個動作的 payload 有效載荷 來傳遞)。

{
  type: types.FETCH_NEW_TIME,
  payload: new Date().toString()
}

現在, 我們需要在我們的store_分發_。我們可以這樣做的一個方法就是調用store.dispatch() 函數。

store.dispatch({
  type: types.FETCH_NEW_TIME,
  payload: new Date().toString()
})

然而, 這是相當糟糕的做法。我們將使用一個函數來返回一個動作, 而不是直接發送該動作, 該函數將 創建 該動作 (因此名稱: actionCreator)。這為我們提供了一個更好的測試故事 (易于測試)、可重用性、文檔化和邏輯封裝。

讓我們在一個名為redux/actionCreators.js的文件中創建我們的第一個actionCreator 。我們將導出全部責任是返回一個適當的動作的一個函數, 以分發我們的store。

import * as types from "./types";

export const fetchNewTime = () => ({
  type: types.FETCH_NEW_TIME,
  payload: new Date().toString(),
})

export const login = (user) => ({
  type: types.LOGIN,
  payload: user
})

export const logout = () => ({
  type: types.LOGOUT,
})

現在, 如果我們調用這個函數, 什么都不會發生 , 除了返回一個動作對象。我們怎樣才能讓這個動作在store里分發？

It gets called with the dispatch function, so here we can bind the function to call dispatch() on the store.回想一下, 我們昨天使用了 connect() 函數導出從react-redux？第一個參數稱為mapStateToProps, 它將狀態映射到一個屬性對象。connect() 函數接受第二個參數, 這使得我們也可以將函數映射到屬性。它被調用的dispatch() 函數, 所以在這里我們可以 綁定 函數以便在store調用dispatch() 。

讓我們來看看這個動作。在我們的src/views/Home/Home.js 文件中, 讓我們通過提供第二個函數來更新我們的連接, 以使用我們剛剛創建的 actionCreator。我們將調用mapDispatchToProps這個函數。

import { fetchNewTime } from "../../redux/actionCreators";
  // ...
const mapDispatchToProps = dispatch => ({
  updateTime: () => dispatch(fetchNewTime())
})
  // ...
export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Home);

現在, updateTime()函數將作為屬性傳遞, 并將調用dispatch() 當我們開始行動。讓我們更新我們的 組件, 以便用戶可以按下一個按鈕來更新時間。

const Home = (props) => {
  return (
    

      
Welcome home!
      
Current time: {props.currentTime}
      
        Update time
      
    
  );
}

雖然這個例子并不令人興奮, 但它確實展示了Redux的特點。想象一下, 如果按鈕獲取新的鳴叫或我們有一個socket驅動更新到我們的Redux store。這個基本示例演示了Redux的完整功能。

現在, 我們我們的應用有一個單一的歸約器。這是目前的工作, 因為我們只有少量的簡單數據和 (想必) 只有一個人在這個應用工作。試想一下, 在我們的應用中為_每一片數據_開發一個巨大的開關語句。

Ahhhhhhhhhhhhhh...

Redux去營救!Redux有一種方法, 我們把我們的Redux歸約器分成多個歸約器, 每個都只負責狀態樹的葉子。

我們可以從 redux 使用combineReducers() 導出, 以組成一個對象的歸約器函數。對于每個觸發的動作, 將使用相應的動作調用每個函數。讓我們來看看這個動作。

假設我們 (也許更現實一些) 想跟蹤當前用戶。讓我們創建一個currentUser Redux模塊..。您猜到了: src/redux/currentUser.js`:

touch src/redux/currentUser.js

我們將導出我們從currentTime 模塊導出的相同的四個值...... 當然, 這一次是針對 currentUser 的。我們在這里添加了一個基本的結構來處理當前用戶:

import * as types from "./types"

export const initialState = {
  user: {},
  loggedIn: false
}

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    case types.LOGIN:
      return {
        ...state, user: action.payload, loggedIn: true};
    case types.LOGOUT:
      return {
        ...state, user: {}, loggedIn: false};
    default:
      return state;
  }
}

讓我們更新我們的configureStore() 函數來考慮這些分支, 使用combineReducers 將兩個分支分開

import { createStore, combineReducers } from "redux";

import { rootReducer, initialState } from "./reducers"
import { reducer, initialState as userInitialState } from "./currentUser"

export const configureStore = () => {
  const store = createStore(
    combineReducers({
      time: rootReducer,
      user: reducer
    }), // root reducer
    {
      time: initialState, 
      user: userInitialState
    }, // our initialState
  );

  return store;
}

export default configureStore;

現在, 我們可以創建login()和logout() 動作創造者在我們的store發送動作。

export const login = (user) => ({
  type: types.LOGIN,
  payload: user
})
  // ...
export const logout = () => ({
  type: types.LOGOUT,
})

現在, 我們可以使用 actionCreators 像updateTime() 動作創造者一樣調用login 和 logout 。

哦!這是Redux代碼的又一個沉重的一天。今天, 我們完成了數據更新和在全局Redux狀態中存儲數據之間的循環。此外, 我們還學習了如何擴展Redux以使用多個歸約器和動作以及多個連接的組件。

但是, 我們還沒有對站外數據進行異步調用。明天我們將進入如何使用中間件與Redux, 這將使我們能夠處理從我們的應用中獲取遠程數據, 仍然使用Redux的能力來保存我們的數據。

今天的工作很好, 明天見!