神刀安全网

Jumpstart your React + Redux development with Duxedo

Preface

I recently stumbled upon an aptly named article, why Javascript development is crazy on HackerNews. The author raised numerous agreeable and valid points as to why Javascript development is so darn hard to start with! If you are new to Javascript development, or not yet aware how crazy Javascript Fatigue can get to you, I recommend you to read the article.

When React and Redux was at the peak of its hype, we at 127 Labs scoured day and night on the web looking for the "Best Practices" for writing a React + Redux app. With much of the material out there in the web, they did not exactly meet our obsessive compulsive palate but I have to credit Erik "erikras" Rasmussen for his ducks-modular-redux bundle which came to be the childhood for our little Duxedo.

Introducing Duxedo

Although I did not realise this at first, but after being pointed out by a colleague, writing even the most trivial app like the "Counter" requires you to write tremendous amount of "bootstrapping" code before even getting to the meat of your app.

I am extremely tempted to write what goes behind Duxedo and explain it’s structure but I’m afraid it’ll lengthen this article way too much. So, let’s just jumpstart with Duxedo and write our own React + Redux app with Duxedo!

Step 1 : Planning

Since Star Wars is Star Wars, let’s write an application that lets you display a list of all the starships and some of its properties pulled down from swapi.co .

If you are a beginner, you can follow along this tutorial just fine but I recommend that you return to this tutorial with some understanding of React + Redux and ES6 before proceeding. I won’t hold you back from reading on, but here’s some great resources out there explaining the fundamentals:

Now we’ve got our base covered, let’s get on it!

Step 2: Installing Duxedo

Note: You should have node.js and npm installed

Run these commands in your terminal to install Duxedo

$ npm install -g yo $ npm install -g generator-duxedo 

and that’s it, you can now start writing your application!

Step 3: Generating Application Boilerplate

generator-duxedo has several commands available for you. You can see the full listing at generator-duxedo GitHub page.

Each commands will generate boilerplates for you and you can start writing your application quickly.

So now, let’s create your starwarsApp by running

$ yo duxedo starwarsApp 

You will be prompted to fill in information that is required for your application. Note that your Surge Domain URL should be different than mine and should leave the Development API and Production API endpoints to its defaults . You can use these settings to point to your own backend API, but since we will be using an external service. We will leave this as defaults for the time being.

Jumpstart your React + Redux development with Duxedo

The generator will proceed with npm install to install all the required dependencies so chill for a sec while it finishes fetching. Once it is done, you can proceed by going into your starwarsApp directory.

$ cd starwarsApp 

You can test your app right away by running npm start . This will spin up a development server at http://localhost:3000 . You should see something like this.

Jumpstart your React + Redux development with Duxedo

We’ve included a scaffold with every generated application to help you see how everything is wired up. We’ve even wired up the Redux DevTool, all you need to do is install Redux DevTools chrome extension and open your Developer Tools to see the Redux state tree like the screenshot above.

From here on, I encourage for you to dive deep into the generated source code and see how everything is wired up. Nothing is abstracted away from you, every code here is what is needed to get your React + Redux application up and running.

Step 4. Start with a Module

The generated scaffold lives in src/modules/app folder, by our convention, the app folder should be reserved only for UI states. We will leave the app module alone for now and lets start of with our own fresh module.

We can generate our starships module by running

$ yo duxedo:module starships 

Now your terminal should display this

Jumpstart your React + Redux development with Duxedo

If you read closely, there’s an additional instructions that requires you to import your module into the root reducer. Let’s go ahead and do that.

Your browser should hot reloads itself and if you have the state tree devtools open, you can see starships are now available in the state tree.

Now, to help you focus a little better and not get distracted by the large directory hierarchy, lets change directory into src/modules/starships and open your favourite text editor from there. Mine looks something like this.

Jumpstart your React + Redux development with Duxedo

Better (hopefully). We will discuss each and every files throughout the tutorial. For now, the module is bare, but that means its time for us to write some codes!!

The only thing you need to know right now is the Data Flow.

React --(dispatch)--> Actions --(reduced in)--> Reducer --(intercept by)--> Saga   

and with the new state tree reduced in the Reducer, React component gets updated instantly, and the cycle continues when new action is dispatched from the React component.

I will not go into Saga just yet, we’ll talk about them later in Step 8.

Step 5. Smart Container

When it comes to developing, it is natural to start with implementing your React components first because it gives you visual feedbacks. Who wants to write something that doesn’t show up right?!

OK, we are almost there with writing codes. We’ll have to generate a StarshipsList container first.

$ yo duxedo:container starships StarshipsList 

Dan Abramov wrote an article about differentiating Smart container and Dumb component. Smart container solely deals with dispatching actions and interfacing with states received by the reducer. Now, let’s write our container to do as such.

in your StarshipsList.jsx :

# 1. add starships to the propTypes const propTypes = {     starships: PropTypes.array, } 
# 2. make starships available to your container using ES6 destructuring syntax # 3. add a button (will implement this later) # 4. add a list to map our starships over const StarshipsList = ({ starships }) =>     <div>     <button>GET STARSHIPS!</button>     <ul>       { starships.map((starship) =>         <Starship key={ starship.name } { ...starship } />       ) }     </ul>   </div> 
# 5. remember to import Starship component import Starship from './Starship'   
# 6. add starships to mapStateToProps # 7. use all selectors const mapStateToProps = (state) => ({     starships: selectors.all(state), }) 

ESLint will complain in the terminal since we have not created Starship component. We will fix this later.

Step 6. Wiring up Actions

We’ve handled how the container receives state from the reducer, now let’s wire how actions are dispatched.

still in your StarshipsList.jsx , add these codes

# 1. import bindActionCreators from redux import { compose, bindActionCreators } from 'redux'   
# 2. import actions import * as actions from '../actions'   
# 3. add $actions to propTypes const propTypes = {     starships: PropTypes.array,   $actions: PropTypes.object, } 
# 4. add $actions to mapDispatchToProps const mapDispatchToProps = (dispatch) => ({     $actions: bindActionCreators(actions, dispatch), }) 
# 5. make $actions available to your container # 7. add onClick handler to GetStarshipsButton component const StarshipsList = ({ starships, $actions }) =>     <div>     <button onClick={ $actions.getStarships }>GET STARSHIPS!</button>     <ul>       { starships.map((starship) =>         <Starship key={ starship.name } { ...starship } />       ) }     </ul>   </div> 

You are done with wiring things up in your StarshipsList.jsx file. Now let’s use the generator to generate getStarships action.

$ yo duxedo:action starships getStarships 

With this, your container will have the actions available to itself.

HALT.

This tutorial appears to be lengthy even for one article. This article continues topart II.

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Jumpstart your React + Redux development with Duxedo

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮