Introduction to Redux – a simple practical Redux example
redux
30
react
38
Male avatar

loveprogramming viết ngày 20/05/2021

https://grokonez.com/frontend/redux/introduction-to-redux-a-simple-practical-redux-example

Introduction to Redux – a simple practical Redux example

In this tutorial, we're gonna introduce main concept of Redux: what it is, how to work with Redux Store, Action, Reducers. Then we will practice to understand all of them in a simple practical Redux example.

Related Post: How to connect React with Redux – react-redux example

Overview

Redux

Redux is a state container that helps JavaScript applications to manage state.
=> Whenever we wanna read the state, look into only one single place - Redux Store.
=> Managing the state could be simplified by dealing with simple objects and pure functions.

Redux Store

Store holds the current state so that we can see it as a single source of truth for our data.
With Redux Store, we can:

  • access to state via store.getState()
  • update state via store.dispatch(action)
  • register listeners via store.subscribe(listener)
  • unregister listeners via the function returned by store.subscribe(listener):
    
    const unsubscribe = store.subscribe(listener);
    unsubscribe();
    
    Note: We only have a single store in a Redux application. => When we wanna split data handling logic, we combine Reducers instead of using many Stores.

    Redux Reducer

    Reducer is a pure function that generates a new state based on an Action it receives. These Actions only describe what happened, but don't describe how state changes.
    
    const countReducer = (state = initialState, action) => {
    // return state;
    }
    
    Note: Reducer must be a pure function: => From given arguments, just calculate the next state and return it. => No side effects. No API or non-pure function calls. No mutations.

    Redux Action

    Action is payload of information that is sent to Store using store.dispatch(action). Action must have a type property that should typically be defined as string constants. It indicates the type of action being performed:

https://grokonez.com/frontend/redux/introduction-to-redux-a-simple-practical-redux-example

Introduction to Redux – a simple practical Redux example

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 9 tháng trước
1 0
Bài viết liên quan
White
19 3
(Link) (Link) — tracks device battery state. (Link) (Link) — tracks geo location state of user's device. (Link) (Link) — tr...
Đinh Viễn viết 2 năm trước
19 3
Male avatar
0 0
https://grokonez.com/frontend/react/getparamfromurledititemformreactreduxexample Get Param from Url & create Edit Item Form – reactredux example ...
loveprogramming viết 5 tháng trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!