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

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

使用Redux，我們來談?wù)勎覀內(nèi)绾卧谖覀兊膽?yīng)用中實際修改Redux狀態(tài)。

昨天, 我們經(jīng)歷了整合我們的反應(yīng)應(yīng)用與Redux的困難部分。從現(xiàn)在起, 我們將使用我們的Redux設(shè)置來定義函數(shù)。

現(xiàn)在, 我們的演示應(yīng)用能顯示當前時間。但目前還沒有任何方法可以更新到新的時間?，F(xiàn)在, 讓我們修改這個。

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

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

創(chuàng)建一個 actionCreator 來 分發(fā) 我們store的動作

調(diào)用一個元素的 actionCreator "onClick"

處理歸約器的動作

我們已經(jīng)實現(xiàn)了第三個步驟, 所以我們還有兩件事要做, 才能讓這個函數(shù)像我們預(yù)期的那樣工作。

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

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

export const FETCH_NEW_TIME = "FETCH_NEW_TIME";

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

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

現(xiàn)在, 我們需要在我們的store_分發(fā)_。我們可以這樣做的一個方法就是調(diào)用store.dispatch() 函數(shù)。

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

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

讓我們在一個名為redux/actionCreators.js的文件中創(chuàng)建我們的第一個actionCreator 。我們將導(dǎo)出全部責(zé)任是返回一個適當?shù)膭幼鞯囊粋€函數(shù), 以分發(fā)我們的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,
})

現(xiàn)在, 如果我們調(diào)用這個函數(shù), 什么都不會發(fā)生 , 除了返回一個動作對象。我們怎樣才能讓這個動作在store里分發(fā)？

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

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

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

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

const Home = (props) => {
  return (
    

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

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

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

Ahhhhhhhhhhhhhh...

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

我們可以從 redux 使用combineReducers() 導(dǎo)出, 以組成一個對象的歸約器函數(shù)。對于每個觸發(fā)的動作, 將使用相應(yīng)的動作調(diào)用每個函數(shù)。讓我們來看看這個動作。

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

touch src/redux/currentUser.js

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

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() 函數(shù)來考慮這些分支, 使用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;

現(xiàn)在, 我們可以創(chuàng)建login()和logout() 動作創(chuàng)造者在我們的store發(fā)送動作。

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

現(xiàn)在, 我們可以使用 actionCreators 像updateTime() 動作創(chuàng)造者一樣調(diào)用login 和 logout 。

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

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

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