React Lessons. Lesson 13 Part 2.

react-logo_13_2

So, let us call these elements inside containers/Articles.js by adding the record and calling action creater:

import { loadAllArticles } from '../AC/articles'

class Articles extends Component {
    static propTypes = {

    };

    componentDidMount() {
        this.props.loadAllArticles()
    }

And down below, in connect, we will wrap it:

export default connect(({ articles, filters }) => {
    return {
        articles: filterArticles(articles, filters)
    }
}, {
    loadAllArticles
})(Articles)

And call it further in  componentDidMount().

Also, in reducer/articles.js we will remove defaultArticles, which we’ve created with you:

const defaultArticles = new OrderedMap({})

Do not forget to connect the object OrderedMap in import:

import { Record, OrderedMap } from 'immutable'

Now we need to connect our middleware inside our store in store/index.js.

Doimport:

import api from '../middlewares/api'

And add it to the same row with other middlewares: for example, following randomID:

const enhancer = compose(
    applyMiddleware(dumbMiddleware, randomId, api, logger),
    window.devToolsExtension ? window.devToolsExtension() : f => f
)

Now, if we restart the app , we will see LOAD_ALL_ARTICLES_SUCCESS in console.

Let us add setTimeout to simulate some remote API, we’ll add it to middlewares/api.js:

   setTimeout(() => {
        $.get(callAPI)
            .done(response => next({type: type + SUCCESS, response, ...rest}))
            .fail(error => next({type: type + FAIL, error, ...rest}))
    }, 1000)
}

Now, if you enter console and restart our app, you will have  START actions and SUCCESS in a second.

So, right now we need to teach our reducers how to deal with the new logics. Move to  reducer/articles.js.  Here we do not only need to have articles as a set of articles, since our app is developing, getting more sophisticated, and we feel a need to have some info on downloading status of the articles.

Connect Map, as well as the immutable array  List from immutable.js:

import { Record, OrderedMap, Map, List } from 'immutable'

Describe the initial state of our reducer  by adding the following record:

const defaultState = new Map({
    loading: false,
    loaded: false,
    errors: new List([]),
    entities: defaultArticles
})

Having the articles added here, we receive a structure that can be reused from one reducer to another, which means entities will contain articles and comments . Our code below will also be changed:

export default (state = defaultState, action) => {
    const { type, payload, response, randomId } = action

    switch (type) {


        case ADD_COMMENT:
            return state.updateIn(['entities' ,payload.articleId, 'comments'], comments => comments.concat(randomId))

        case LOAD_ALL_ARTICLES + START:
            return state.set('loading', true)

        case LOAD_ALL_ARTICLES + SUCCESS:
            return state
                .set('loading', false)
                .set('entities', recordsFromArray(Article, response))
                //return state.update('entities', entities => entities.merge(recordsFromArray(Article, response)))

    }
   
    return state
}

Pay your attention to the commenting-out string. This record describes how you can load your articles in a different way using the methods update and  merge from immutable.js. In this case, we update the list of our articles. When we receive LOAD_ALL_ARTICLES + SUCCESS, we take old entities  (whether we’ve had them) and do merge with the new ones. By default, the process of adding articles will be executed by us using set  i.e. just by simply updating the list. We’ve added  .set('loading', ...) in order to have a chance for adding loader when uploading our articles.

Let’s move on. Now we need to re-write the logics of how we receive the data in function   filterArticles  in containers/Articles.js, as well as add loader to our UI:

    render() {
        const { articles, loading } = this.props
        if (loading) return <h1>Loading...</h1>
        return <ArticleList articles = {articles} />
    }
}

export default connect(({ articles, filters }) => {
    return {
        loading: articles.get('loading'),
        articles: filterArticles(articles.get('entities'), filters)
    }
}, {
    loadAllArticles
})(Articles)

We’ve added an indicator to export default and a simple loader to render. (Once we’re finished, we’ll see a respectful status “Loading” until an article gets uploaded).
In immutable.js you need to write your address explicitly in order to get  articles.get('entities') data. When we used the immutable object Record, we could avoid this kind of calling, since everything was going on behind the curtain, and “getters” and “setters” were created inside, as in case of const Article  in  reducer/articles.js.
Let us continue our upgrading and change  reducer/articles.js  in the following way:

import { DELETE_ARTICLE, ADD_COMMENT, LOAD_ALL_ARTICLES, START, SUCCESS } from '../constants'
import { Record, OrderedMap, Map, List } from 'immutable'
import { recordsFromArray } from './utils'

We are not going to deal with the errors right now. The record on import

normalizedArticles won’t be needed here anymore. Let us change our constant defaultArticles :

const defaultArticles = recordsFromArray(Article, [])

And, of course, return in the end of the file:

return state

Everything’s done now – go ahead and check it! Our lesson’s code can be found here. See you soon! We’ve got bunch of interesting things ahead!

react-boilerplate

We are looking forward to meeting you on our website soshace.com

Make your remote work more effective – Hire your first remote professional today!

Please enter correct name
Looks good!
Please enter correct email
Looks good!
Please confirm that you agree

Related articles

11.03.2018

Elastic Search – Basics

There's no secrete that in modern Web applications an ability to find required content fast is one of the most important things. So if your>>>

Programming
15.02.2018

Web Workers: Concurrency In Java Script

Web Worker is a modular script that runs separately from the main JS thread (a thread that normally includes all the scripts of your web application)>>>

Programming
29.11.2017

D3.js and Angular/Vue.js Integration

Nowadays there’re lots of technologies in a Front-end and most of them have easily understandable tutorials. So starting with them is not a>>>

Programming
Never miss a story from Soshace
Looks good!
Please enter correct name
Please enter correct email
Looks good!
Please confirm to subscribe!