[Ngày 1] Nhật ký Redux - React Native
redux
11
White

lotus viết ngày 16/06/2017

Thành phần

Có 3 thành phần chính trong redux:

  • Store: Lưu trữ các trạng thái(State) của ứng dụng
  • Action: Hành động của người dùng
  • Reducer: Thay đổi State dựa vào Action

Viết code

Tạo store

install redux

npm i -S redux
import {createStore} from 'redux
let initialState = 0
const store = createStore(reducer, initialState) 

vì store nhận vào reducer nên giờ ta tạo reducer

const reducer =  function(state, action){
    return state
}

Run

console.log(store)

alt text

Ta sẽ thấy store có các thành phần là:

  • dispatch: nhận vào 1 hàh động(action)
  • getState: trả về các trạng thái của ứng dụng
  • replaceReducer: thay thế reducer
  • subscribe: lắng nghe action

Để dễ hình dung bạn nhìn đoạn code dưới đây:

import {createStore} from 'redux'

const reducer = function(state=0, action){
    if(action.type === 'INC')
        return state + 1
   return state
}

let initialState = 0
const store = createStore(reducer, initialState)

store.subscribe(()=>{
    console.log('Current State: ' + store.getState())
})

let action = {type: 'INC'};
store.dispatch(action);

Kết quả:

Current State: 1
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

White

lotus

7 bài viết.
2 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
10 0
Emmet là gì? Emmet là một plugin cho các code editor phổ biến như Sublime text, atom, bracket,… Emmet giúp việc code html và css nhanh hơn và đ...
lotus viết hơn 1 năm trước
10 0
White
8 3
Toán tử 3 ngôi Longhand const x = 20; let big; if (x 10) { big = true; } else { big = false; } Shorthand
lotus viết hơn 1 năm trước
8 3
White
3 1
Tôi bắt đầu tự hỏi, rằng có tồn tại không, một kỹ năng giúp ta đối mặt với mọi thứ trong cuộc sống. Nếu có thì nó là gì và làm sao để phát triển?...
lotus viết hơn 1 năm trước
3 1
Bài viết liên quan
White
4 1
Trải qua 1 thời gian khá dài trải nghiệm Angular, mình thấy RxJS khá hay. Bài này sẽ quay trở lại với bài toán Counter thần kì của React/Redux, như...
cdxf viết 3 tháng trước
4 1
White
9 5
Chào mừng các bạn trở lại với series (Link), trong (Link) chúng ta đã setup xong project và đã viết được những React component đầu tiên. Trong bài ...
Hoàng Nguyễn viết 2 năm trước
9 5
White
14 4
Tôi đã từng viết một số bài giới thiệu về (Link), hay (Link) tuy nhiên chừng đó có vẻ là chưa đủ để bạn có thể lặn sâu hơn vao trong thế giới của R...
Hoàng Nguyễn viết 2 năm trước
14 4
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
7 bài viết.
2 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á!