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

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

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

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

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

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

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

創(chuàng)建一個(gè) actionCreator 來(lái) 分發(fā) 我們store的動(dòng)作

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

處理歸約器的動(dòng)作

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

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

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

export const FETCH_NEW_TIME = "FETCH_NEW_TIME";

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

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

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

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

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

讓我們?cè)谝粋€(gè)名為redux/actionCreators.js的文件中創(chuàng)建我們的第一個(gè)actionCreator 。我們將導(dǎo)出全部責(zé)任是返回一個(gè)適當(dāng)?shù)膭?dòng)作的一個(gè)函數(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)用這個(gè)函數(shù), 什么都不會(huì)發(fā)生 , 除了返回一個(gè)動(dòng)作對(duì)象。我們?cè)鯓硬拍茏屵@個(gè)動(dòng)作在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？第一個(gè)參數(shù)稱為mapStateToProps, 它將狀態(tài)映射到一個(gè)屬性對(duì)象。connect() 函數(shù)接受第二個(gè)參數(shù), 這使得我們也可以將函數(shù)映射到屬性。它被調(diào)用的dispatch() 函數(shù), 所以在這里我們可以 綁定 函數(shù)以便在store調(diào)用dispatch() 。

讓我們來(lái)看看這個(gè)動(dòng)作。在我們的src/views/Home/Home.js 文件中, 讓我們通過(guò)提供第二個(gè)函數(shù)來(lái)更新我們的連接, 以使用我們剛剛創(chuàng)建的 actionCreator。我們將調(diào)用mapDispatchToProps這個(gè)函數(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() 當(dāng)我們開始行動(dòng)。讓我們更新我們的 組件, 以便用戶可以按下一個(gè)按鈕來(lái)更新時(shí)間。

const Home = (props) => {
  return (
    

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

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

現(xiàn)在, 我們我們的應(yīng)用有一個(gè)單一的歸約器。這是目前的工作, 因?yàn)槲覀冎挥猩倭康暮?jiǎn)單數(shù)據(jù)和 (想必) 只有一個(gè)人在這個(gè)應(yīng)用工作。試想一下, 在我們的應(yīng)用中為_每一片數(shù)據(jù)_開發(fā)一個(gè)巨大的開關(guān)語(yǔ)句。

Ahhhhhhhhhhhhhh...

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

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

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

touch src/redux/currentUser.js

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

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ù)來(lái)考慮這些分支, 使用combineReducers 將兩個(gè)分支分開

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() 動(dòng)作創(chuàng)造者在我們的store發(fā)送動(dòng)作。

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

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

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

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

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