React Lesson 8: Deep Dive into React Redux

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

内容简介:In theprevious lesson, we understood the working of Redux by building a Counter app. Now, we will apply that knowledge and go in-depth with the React-Redux library. Let’s start.First, we will make some changes to our folder structure. The components includ
React Lesson 8: Deep Dive into React Redux

React Lessons. Lesson 8. Deep Dive into React Redux

In theprevious lesson, we understood the working of Redux by building a Counter app. Now, we will apply that knowledge and go in-depth with the React-Redux library. Let’s start.

First, we will make some changes to our folder structure. The components including Provider are called container that contains store. Let’s create a new folder “containers” and add a root container.

///containers/Root.js
import React from "react";
import Articles from "./Articles";
import Counter from "./Counter";
import { Provider } from "react-redux";
import store from "../store";
 
function Root() {
  return (
    <Provider store={store}>
      {/* <Counter /> */}
      <Articles />
    </Provider>
  );
}
 
export default Root;

Now, change our index file to import the root container:

//index.js
 
import React from "react";
import ReactDOM from "react-dom";
import Root from "./containers/Root"; //import Root
 
const rootElement = document.getElementById("root");
ReactDOM.render(<Root />, rootElement);

That’s good enough. Let’s move on to React-Redux in our main application.

Use Redux to serve our articles

Redux divides objects into “containers” and “components.” “Smart” components are those connected with “Store” – such as Counter, for example. And some components simply receive data and render them. Now we’ll have two containers – Counter and ArticleList. We will add Redux with ArticleList. Let’s get a quick idea of how we’ll do it:

  1. Create a reducer to serve all the articles.
  2. Connect ArticleList to store which will render the article list.
  3. Write an action to delete any article.
  4. Dispatch the action to filter out an article from the article list.

Let’s dive into code

Let’s dive into code

1. Create a reducer to serve all the articles

We already created a “counter” reducer inside the “reducers” folder. Similarly, we will create an “articles” reducer and export it.

//reducers/articles.js
 
//import the article array
import { articles as defaultArticles } from "../fixtures";
 
//define initial state
const INITIAL_STATE = {
  articles: defaultArticles
};
 
//create a basic reducer function to return state
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

Let’s recall reducers from the previous lesson, “Reducers are just pure functions that return a new state every time we dispatch an action which in turn re-render the View.”

Previously, we had just a single reducer “index.js” which we split into two separate reducers “articles.js” and “counter.js” . We will “combineReducers” from the “redux” library to combine and export them to the store.

//reducers/index.js
 
import { combineReducers } from "redux";
import article from "./articles";
import counter from "./counter";
export default combineReducers({
  article,
  counter
});

2. Connect ArticleList to store which will render the article list.

Components that are connected to the store are called containers. We are going to create an “Articles” component inside the “containers” folder and connect it with the store.

//containers/Articles.js
 
import React from "react";
import { connect } from "react-redux";
import ArticleList from "../components/ArticleList";
 
function Articles(props) {
  const { articles } = props;
  return <ArticleList articles={articles} />;
}
 
const mapStateToProps = state => {
  return {
    articles: state.article.articles
  };
};
 
export default connect(
  mapStateToProps,
  {}
)(Articles);

We are using the “connect” function from the “react-redux” library to connect the “Articles” component with the store. As we learned in the previous lesson, connect in a Higher-Order function receives two arguments:

  • mapStateToProps
  • mapDispatchToProps

“mapStateToProps”enables us to use state from reducer inside our component. We used “articles” from the reducer state and passed it as props above. We are using actions here, so we will leave the second argument empty for now.

3. Write an action to delete any article

We wrote two actions “increment” and “decrement” in the previous lesson. Similarly, we will write a “deleteArticle” action to delete any article from article array. Let’s create an action type first:

//types.js
 
export const DELETE_ARTICLE = "delete_article";

Action types are defined to avoid spelling mistakes while writing them inside actions and reducers. Now we will create an articles file inside actions folder:

//actions/articles.js
 
//import action type
import { DELETE_ARTICLE } from "../types";
 
//define action
export const deleteArticle = id => {
  return {
    type: DELETE_ARTICLE,
    payload: id
  };
};

Let’s recall actions from the previous lesson, “Actions are a piece of code that tells how to change state” . Here, our “deleteArticle” action gets an “id” and passes it to the reducer to filter out the article with that particular “id.”

Previously, we had only one action creator as “actions/index.js,” which we split into two separate action creators “articles.js” and “counter.js” . They can be exported as:

export * from "./counter";
export * from "./articles";

The reducer will be updated like this:

//reducers/articles.js
 
//import type
import { DELETE_ARTICLE } from "../types";
import { articles as defaultArticles } from "../fixtures";
 
const INITIAL_STATE = {
  articles: defaultArticles
};
 
//get id from action.payload and return the filtered state
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case DELETE_ARTICLE:
      const filteredArticles = state.articles.filter(
        article => article.id !== action.payload
      );
      return { ...state, articles: filteredArticles };
 
    default:
      return state;
  }
};

Now, we just have to dispatch the action from a view.

4. Dispatch the action to filter out an article from the article list.

The best place to dispatch the “deleteArticle” action is when a user clicks on any article. Let’s connect the Article component which is rendering each article to store.

/components/Article/index.js
 
import React, { Component } from "react";
import PropTypes from "prop-types";
import CommentList from "../CommentList";
import "./style.css";
import { CSSTransition } from "react-transition-group";
 
//import connect and action 
import { connect } from "react-redux";
import { deleteArticle } from "../../actions";
 
class Article extends Component {
  static propTypes = {
    article: PropTypes.object.isRequired
  };
 
  handleDelete = event => {
    event.preventDefault();
    // get action from props
    const { article, deleteArticle } = this.props;
    deleteArticle(article.id);
  };
 
  render() {
    const {
      isOpen,
      openArticle,
      article: { title, text, comments }
    } = this.props;
    return (
      <div className="article">
        <h1 onClick={openArticle}>{title}</h1>
 
        //call deleteAction on button click
        <a href="#" onClick={this.handleDelete}>
          delete me
        </a>
        <CSSTransition
          in={isOpen}
          timeout={500}
          classNames="article"
          unmountOnExit
        >
          <section>
            {text} <CommentList comments={comments} />
          </section>
        </CSSTransition>
      </div>
    );
  }
}
 
//connect the article to store
export default connect(
  null,
  { deleteArticle }
)(Article);

Our first argument of “connect” is  null  because we are not using anything from the reducer state. The second argument “mapDispatchToProps” takes actions and maps them to props. This will make sure the “deleteArticle” action is provided as a prop to the component.

Our Article container with delete functionality is ready. You can visit this codesandbox below to see it in action.

Your home task:

Do Reducer and a part of Store for filters, as well as create the filtering functionality for the articles. It means, in the end, upon choosing a time in the calendar, only those articles added during this time should be displayed. And transmit all these filters from ArticleList to the “filters” component. Handle these filters through Redux – so, ArticleList will display only the filtered data.

This lesson’s coding can be found here .


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

素数之恋

素数之恋

(美)约翰·德比希尔 / 陈为蓬 / 上海科技教育出版社 / 2008-12-01 / 34.00元

1859年8月,没什么名气的32岁数学家黎曼向柏林科学院提交了一篇论文,题为“论小于一个给定值的素数的个数”。在这篇论文的中间部分,黎曼作了一个附带的备注——一个猜测,一个假设。他向那天被召集来审查论文的数学家们抛出的这个问题,结果在随后的年代里给无数的学者产生了近乎残酷的压力。时至今日,在经历了150年的认真研究和极力探索后,这个问题仍然悬而未决。这个假设成立还是不成立? 已经越来越清楚,......一起来看看 《素数之恋》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

SHA 加密
SHA 加密

SHA 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具