by Jonathan Puc

喬納森·普克(Jonathan Puc)

我如何使用React，Redux-Saga和Styled Components構建NBA球員資料獲取器 (How I built an NBA player profile fetcher with React, Redux-Saga, and Styled Components)

Hello, all! It’s been a while since I built something out of personal enjoyment or curiosity, so I surfed the internet exploring cool API’s.

大家好！自從我出于個人樂趣或好奇心建立東西以來已經有一段時間了，所以我上網瀏覽了很酷的API。

Since it’s NBA Playoff time (sadly, I’m a Knicks fan), I decided to see if there was an existing API that contained the data of every player currently in the NBA — and heck yeah, there was.

由于現在是NBA季后賽的時間(很遺憾，我是尼克斯的球迷)，所以我決定查看是否存在一個包含NBA當前每個球員的數據的API-確實如此。

Also, a project I’m working on at my job has introduced me to two awesome libraries called redux-saga and styled components. They are pretty darn exciting, and are two things I definitely plan to try and use in all my future projects.

另外，我正在工作的一個項目將我介紹給了兩個很棒的庫，分別稱為redux-saga和styled components 。它們非常令人興奮，是我絕對計劃在以后的所有項目中嘗試使用的兩件事。

So let’s build a React application with these libraries!

因此，讓我們使用這些庫構建一個React應用程序！

Before we dive in, let’s just talk a bit about redux-saga and styled components and why they are handy.

在深入探討之前，讓我們先討論一下redux-saga和樣式化的組件以及它們為什么方便使用。

Redux-Saga (Redux-Saga)

In Redux, actions and reducers are pure, meaning they don’t have any side effects.

在Redux中，動作和減速器是純凈的，這意味著它們沒有任何副作用。

An example of a side-effect could be something like a service request. When you are making a request, it can fail or return a different kind of result even though you always send the same request.

副作用的一個例子可能是服務請求之類的東西。當您發出請求時，即使您始終發送相同的請求，它也可能失敗或返回不同類型的結果。

So if your reducers and actions are pure, where can you handle / put side effects? Well redux-saga is a solution. It allows you to listen to actions, perform a side effect, and then dispatch another action.

因此，如果您的減速器和動作是純凈的，那么在哪里可以處理/放置副作用？那么redux-saga是一個解決方案。它使您可以收聽動作，執行副作用，然后分派另一個動作。

I know, talk is cheap. Show me the code.

我知道，談話很便宜。給我看代碼。

Are you ready to see an example of this beast at work?

您準備好在工作中看到這種野獸的例子嗎？

In a nutshell, we have a function that listens for whenever an action of type ‘IMAGE_FETCH_REQUESTED’ is dispatched. When it identifies one, it’ll call the fetchImage function.

簡而言之，我們有一個函數，該函數在調度'IMAGE_FETCH_REQUESTED'類型的動作時偵聽。當識別出一個時，它將調用fetchImage函數。

Inside the fetchImage function, we simply make a special call to a method on our service object, passing along the userId of the profile image we want to grab. The result gets saved inside our profileImage variable.

在fetchImage函數內部，我們只需對service對象上的方法進行特殊call ，并傳遞我們要獲取的配置文件圖像的userId 。結果將保存在我們的profileImage變量中。

Shortly after, we let our store know that we have successfully grabbed an image and would like to pass the image on to be stored. So we’ll just dispatch an action with put with the type of 'IMAGE_FETCH_SUCCEEDED' and pass the image as payload. Our reducer will handle the rest.

不久之后，我們通知商店我們已成功獲取圖像，并希望將圖像傳遞給存儲。因此，我們將使用類型為'IMAGE_FETCH_SUCCEEDED' put調度一個動作， put圖像作為有效負載傳遞。我們的減速機將處理其余的工作。

But if there is some kind of error, we simply dispatch an action with the type'IMAGE_FETCH_FAIL' and pass the error as payload.

但是，如果存在某種錯誤，我們只需調度類型為'IMAGE_FETCH_FAIL' ，并將錯誤作為有效負載傳遞。

The beauty of it lies in how nicely it reads and sits within a simple try catch block.

它的優點在于它在一個簡單的try catch塊中的讀取和放置效果很好。

Feel free to read more about redux-saga.

隨時閱讀有關redux-saga的更多信息。

樣式化的組件 (Styled Components)

Discovering styled components kind of blew my mind.

發現樣式化的組件讓我大吃一驚。

I always had trouble structuring and writing CSS inside React apps. Something didn’t sit right and it felt messy to me. In particular, class names were tough.

我在React應用程序內部構造和編寫CSS時總是遇到麻煩。東西坐不對勁，這讓我感到混亂。特別是，類名很難。

The whole idea of React is about being modular: you write a component once and are able to use it everywhere. But when styling such components, we still give them a class name to target them with CSS.

React的整個思想都是關于模塊化的：您只需編寫一次組件就可以在任何地方使用它。但是在樣式化這些組件時，我們仍然給它們一個類名使用CSS定位它們。

Max Stoiber, co-creator of styled components, put it perfectly when he said:

樣式組件的共同創建者Max Stoiber完美地說：

If you only ever use every class name once, why do you have a class name at all?

如果您一次只使用每個類名，那么為什么要一個類名呢？

Having heard those words, I knew styled components was for me.

聽到了這些話，我知道樣式化組件適合我。

So let’s see this one at work now too:

因此，讓我們現在也來看一下它：

Here we have a basic functional component: a button that pretty much does nothing, even though it’s daring you to make your move.

在這里，我們有一個基本的功能組件：一個按鈕，幾乎不執行任何操作，即使它敢于讓您行動起來。

This may look weird to newcomers, but really it’s quite simple and I’m sure you’ll fall in love with it in no time.

對于新來者來說，這可能看起來很奇怪，但實際上這很簡單，我敢肯定，您很快就會愛上它。

We import styled from the library. Think of this as a factory that allows you to create the HTML nodes you all know and love.

我們從庫中導入styled 。可以將其視為一個工廠，它允許您創建大家都知道并喜歡HTML節點。

We create the node of our liking. In this case, a button and span, with its styles. We then assign it to a variable of our choice.

我們創建自己喜歡的節點。在這種情況下，為按鈕和跨度及其樣式。然后，將其分配給我們選擇的變量。

Now we refer to those variables and pop them within our functional component to be rendered.

現在，我們引用這些變量并將它們彈出到要呈現的功能組件中。

It’s as easy as that.

就這么簡單。

What I really like is that you can still write the CSS you are familiar with in a JS file. Furthermore, it keeps everything nice and modular — everything sits within a single file, easy to read and digest!

我真正喜歡的是，您仍然可以在JS文件中編寫熟悉CSS。此外，它使所有內容保持良好和模塊化-所有內容都位于一個文件中，易于閱讀和消化！

You can learn more about styled-components here.

您可以在此處了解有關樣式化組件的更多信息。

所有這些如何聯系在一起 (How this all links together)

We’ll be building an application where users can search for a player using their first and last name. Our saga (redux-saga) will fetch the data of the player, including statistics and a headshot of them, and save it into our redux store. And using styled components, we’ll make all this information look a little more presentable.

我們將構建一個應用程序，用戶可以在其中使用其名字和姓氏搜索球員。我們的傳奇(redux-saga)將獲取播放器的數據，包括統計數據和爆頭，并將其保存到我們的redux存儲中。并使用樣式化的組件，我們將使所有這些信息看起來更具表現力。

第1部分-設置我們的應用程序和react-redux。 (Part 1 — Setting up our app and react-redux.)

We’ll be using create-react-app in this project, so if you haven’t yet got it installed, just run npm install -g create-react-app .

我們將在此項目中使用create-react-app，因此，如果尚未安裝，請運行npm install -g create-react-app 。

When that’s done, we’ll run create-react-app nba-players .

完成后，我們將運行create-react-app nba-players 。

Now after all the installing and scaffolding is done, we’ll cd nba-players and then install the modules we’ll need with npm install --save redux react-redux redux-saga styled-components axios .

現在，在完成所有安裝和腳手架之后，我們將對cd nba-players ，然后使用npm install --save redux react-redux redux-saga styled-components axios安裝所需的模塊。

設置我們的redux商店 (Setting up our redux store)

This will be a quick walkthrough of getting our store set up, since this guide is about redux-saga and styled components and not about react-redux/redux.

這將是建立商店的快速指南，因為本指南是關于redux-saga和樣式化組件的，而不是react-redux / redux。

Inside your src folder, we’ll create a folder called store and create our index.js file.

在您的src文件夾中，我們將創建一個名為store的文件夾并創建我們的index.js文件。

store/index.js

商店/index.js

We’ll be using Redux DevTools to see what’s going on under the hood in our store. You can download the Chrome extension here.

我們將使用Redux DevTools來查看我們商店內部的動態。您可以在此處下載Chrome擴展程序。

讓我們創建我們的減速器。 (Let’s create our reducers.)

Make a folder called reducers within the root of your store folder, and create the two following files:

在store文件夾的根目錄中創建一個名為reducers的文件夾，并創建以下兩個文件：

reducers/index.js

reducers / index.js

reducers/player.js

reducers / player.js

讓我們創造行動 (Lets create our actions)

Make a folder called actions within the root of your store folder, and create the two following files:

在store文件夾的根目錄中創建一個名為actions的文件夾，并創建以下兩個文件：

actions/actionTypes.js

actions / actionTypes.js

actions/player.js

動作/player.js

With all those pieces created, let’s connect the store to our React application!

創建所有這些片段后，讓我們將商店連接到我們的React應用程序！

Navigate your way to src/index.js and add the following:

導航至src/index.js并添加以下內容：

Sweet, let’s test and make sure everything is working as expected.

親愛的，讓我們進行測試并確保一切都按預期進行。

Back in our terminal, we’ll run npm run start to fire up our React app, open the developer tools, and navigate to the ‘Redux’ tab. Click on the State tab within the Redux DevTools.

回到我們的終端，我們將運行npm run start來啟動我們的React應用程序，打開開發人員工具，并導航到“ Redux”標簽。單擊Redux DevTools中的“狀態”選項卡。

You should see something like this :)

您應該看到類似這樣的內容：)

Awesome, we’ve got everything we need to get started.

太棒了，我們已經具備了開始所需的一切。

第2部分-Redux Saga (Part 2— Redux Saga)

We’re ready to utilise the NBA player API to fetch data and load it into our store!

我們已經準備好利用NBA Player API來獲取數據并將其加載到我們的商店中！

Let’s write our first saga.

讓我們來寫我們的第一個傳奇。

Inside our src/store folder, we’ll create a folder called sagas and create a file called index.js .

在src/store文件夾中，我們將創建一個名為sagas的文件夾，并創建一個名為index.js的文件。

This basically serves as our watcher / gatekeeper.

這基本上是我們的觀察者/網守。

Line 8 sits there and listens for certain action types we give it. When an action passes through that matches, it’ll call a function, in this case retrievePlayer. We’ll create that now.

Line 8坐在那里，聽我們給出的某些動作類型。當某個動作通過匹配項時，它將調用一個函數，在本例中為retrievePlayer。我們現在將創建它。

Within the same folder, we’ll create a file called player.js and it’ll contain the following:

在同一文件夾中，我們將創建一個名為player.js的文件，其中包含以下內容：

The retrievePlayer generator function is where the magic happens, so let’s walk through it.

神奇的地方就是retrievePlayer生成器功能，因此讓我們逐步進行了解。

The function has access to the action that’s passed through. If you can recall from our action creator in actions/player.js , we pass a name.

該函數可以訪問通過的操作。如果您可以在actions/player.js從動作創建者actions/player.js ，那么我們會傳遞一個名稱。

We’ll use ES6 destructuring to get the name and surname from the name object attached to the action payload.

我們將使用ES6解構從附加到動作有效內容的名稱對象中獲取名稱和姓氏。

Using redux-saga, we call our fetchPlayerData function and pass in the name details.

使用redux-saga，我們call fetchPlayerData函數并傳遞名稱詳細信息。

fetchPlayerData will make a GET call to the NBA players API and return the response. The response will be saved inside the stats variable.

fetchPlayerData將對NBA球員API進行GET調用并返回響應。響應將保存在stats變量中。

Access to the players image is as easy as appending the name and surname to the API endpoint, so we do just that.

訪問播放器圖像就像將名稱和姓氏附加到API端點一樣容易，因此我們就可以做到這一點。

We save our two new pieces of data into an object called playerProfile.

我們將兩個新數據保存到名為playerProfile的對象中。

We then use redux-saga’s put which will dispatch an action. Here we give it the type of GET_PLAYER_SUCCESS with the our new playerProfile as the payload.

然后，我們使用redux-saga的put來調度動作。在這里，我們將其類型GET_PLAYER_SUCCESS ，并將新的playerProfile作為有效負載。

If something goes wrong, we simply dispatch an action with the type GET_PLAYER_FAIL and pass the error as the payload.

如果出了什么問題，我們只需調度一個類型為GET_PLAYER_FAIL的動作，并將錯誤作為有效負載傳遞。

That’s it!

而已！

Our players reducer that we made previously at reducers/player.js will handle the rest after receiving the actions we dispatched.

我們先前在reducers/player.js制作的玩家reducer將在收到我們分派的動作后處理其余的事情。

There is one last thing we need to do before our sagas work, however.

但是，在進行Sagas工作之前，我們需要做的最后一件事。

Inside store/index.js we’ll have to make some modifications.

在store/index.js內部，我們必須進行一些修改。

It should now look like the following

現在應該如下所示

Woohoo, we’re now ready to build some components that’ll allow us to search for a player and see their image and stats :)

Woohoo，我們現在準備構建一些組件，使我們可以搜索播放器并查看其圖像和統計信息：)

第3部分-樣式化的組件 (Part 3 — Styled Components)

components/Search.js

components/StatBox.js

components/PlayerPhoto.js

components/Player.js

With all our components built, it’s time to import them into our App.js

構建了我們所有的組件之后，是時候將它們導入到我們的App.js

Everything’s hooked up and ready to go. Simply type in the full name of a player to your liking, such as Lebron James or Stephen Curry, and you should see something like this.

一切都已準備就緒，可以開始使用了。只需輸入您喜歡的球員的全名，例如勒布朗·詹姆斯或斯蒂芬·庫里，您應該會看到類似的內容。

Not the prettiest thing to look at, but this is an opportunity for you to apply styling as you see fit. Go crazy with the styled-components library.

并不是最漂亮的東西，但這是您有機會讓您應用自己認為合適的樣式的機會。使用樣式化的組件庫瘋狂。

Also remember that we added a loading property in our redux store state.player.loading ? Why not make the UX a little bit nicer by showing a loading message of some kind when loading is set to true?

還記得我們在redux存儲state.player.loading添加了loading屬性嗎？為什么在加載設置為true時通過顯示某種類型的加載消息來使UX更好一點？

We’ve created the foundation of the application together — now go on and give it your own personal touch :)

我們一起創建了應用程序的基礎-現在繼續進行操作，讓您自己擁有個性：)

If needed, you can find the source code here.

如果需要，可以在此處找到源代碼。

As always, my inbox is open to anybody in need of further advice or if you have questions.

與往常一樣，我的收件箱向所有需要進一步建議或有任何疑問的人開放。

Feel free to connect with me on any of the platforms below!

隨時在以下任何平臺上與我聯系！

Instagram | LinkedIn | Twitter

Instagram | 領英推特