React Lesson 13 Part 2: Asynchronous actions

栏目: IT技术 · 发布时间: 4年前

内容简介:Hey everyone. In the previousarticle, we usedWe are not getting articles fromNow update the initial state:
React Lesson 13 Part 2: Asynchronous actions

React Lesson 13 Part 2: Asynchronous actions

Hey everyone. In the previousarticle, we used Redux Thunk and learned how to structure actions for asynchronous calls. Now we will update reducer to handle them and then dispatch them from  Articles.js . Let’s update the reducer first.

We are not getting articles from fixtures.js now. That means we will initially have an empty array in articles instead of normalizedArticles and defaultArticles will look something like this:

const defaultArticles = recordsFromArray(Article, []);

Now update the initial state:

const defaultState = new Map({
    isFetching: false,
    errors: new [],
    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, entities: state.entities.updateIn(
          [action.payload.articleId, "comments"],
          comments => comments.concat(action.randomId)
        )};
    case DELETE_ARTICLE:
      return { ...state, entities: state.entities.delete(action.payload) };
 
    //Add the three cases below
    case FETCH_ARTICLE_REQUEST:
        return { ...state, isFetching: true };
    case FETCH_ARTICLE_FAILURE:
        return { ...state, isFetching: false, errors: state.errors.push(action.error) };
    case FETCH_ARTICLE_SUCCESS:
        return { ...state, isFetching: false, entities: recordsFromArray(Article, action.payload) };
    }
    return state
}

As you can see, we have slightly updated our INITIAL_STATE which means we have to update the containers where we are consuming this state. Let’s start with  Filters.js :

//just update mapStateToProps
 
const mapStateToProps = state => {
  return {
    articles: state.article.entities.valueSeq(),
    filters: state.filters
  };
};

Now update containers/Articles.js . We are going to call action where we are fetching all the articles from the API and update state to get those articles from entities:

/ add import
import { fetchArticleRequest } from '../actions';
 
//update component
class Articles extends React.Component {
  componentDidMount(){
    this.props.fetchArticleRequest();
  }
 
  render(){
    const { articles, isFetching } = this.props;
    if(isFetching) return <p>Loading...</p>;
    return <ArticleList articles={articles} />;
  }
}
 
//update mapStateToProps
const mapStateToProps = state => {
  return {
    isFetching: state.article.isFetching,
    articles: filterArticles(state.article.entities, state.filters)
  };
};
 
export default connect(
  mapStateToProps,
  { fetchArticleRequest } //connect action to store
)(Articles);

In the render function, we are checking isFetching flag which we defined earlier. While isFetching is true , we know the request is in process and we can show a loading text or spinner while we get our data. Once we have the data isFetching will be updated to false and render function will render the ArticleList on screen.

That’s it. We have successfully connected actions with reducer and can fetch articles from the API. I hope you understood how to use thunk for asynchronous calls in actions. Go ahead and check it. Lesson code can be found in the GitHub repo .


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

你必须知道的213个C语言问题

你必须知道的213个C语言问题

范立锋、李世欣 / 人民邮电出版社 / 2010-6 / 45.00元

《你必须知道的213个C语言问题》精选了213个在C语言程序设计中经常遇到的问题,目的是帮助读者解决在C语言学习和开发中遇到的实际困难,提高读者学习和开发的效率。这些问题涵盖了C语言与软件开发、C语言基础、编译预处理、字符串、函数、键盘操作、文件、目录和磁盘、数组、指针和结构、DOS服务和BIOS服务、日期和时间、重定向I/O和进程命令、C语言开发常见错误及程序调试等内容,均是作者经过充分的调研,......一起来看看 《你必须知道的213个C语言问题》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具