Skip to main content
Kiến thức REDUX trong lập trình React (Reactjs & React Native)

Share Everywhere

1- Tại sao cần sử dụng redux? Khi nào sử dụng redux?

2- Các thành phần trong kiến trúc redux: state, store, action, reducer

3- Kết hợp các thành phần như thế nào?

+ Tạo 1 store redux đơn giản.

+ Thay đổi giá trị của store thông qua các action

+ Reducer phải là 1 peer function

4. Kết hợp react với redux.

5. Các component react sử dụng state của redux như thế nào?

6. Các component react dispatch các action như thế nào?

7. Ví dụ về Redux

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style={styleApp.container}>
                <View style={styleApp.header}>
                    <Text style={styleApp.appName}>EXAM 1: {'\n'}APP COMPONENT</Text>
                    <Text style={styleApp.value}>0</Text>
                </View>
                <View style={styleController.controller}>
                    <Text style={styleController.controllName}>CONTROLLER COMPONENT</Text>
                    <View style={styleController.buttonContainer}>
                        <TouchableOpacity style={styleController.button}>
                            <Text style={styleController.buttonText}>+</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={styleController.button}>
                            <Text style={styleController.buttonText}>-</Text>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        );
    }
}

const styleApp = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: 'black',
        paddingTop: 30
    },
    header: {
        flex: 1,
        justifyContent: 'space-around',
        alignItems: 'center'
    },
    appName: {
        color: 'white',
        fontSize: 30,
        textAlign: 'center'
    },
    value: {
        color: 'yellow',
        fontSize: 40
    }
});

const styleController = StyleSheet.create({
    controller: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-around',
        backgroundColor: 'yellow',
        alignSelf: 'stretch',
        margin: 20
    },
    controllName: {
        fontSize: 20,
        marginBottom: 10
    },
    buttonContainer: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    button: {
        backgroundColor: 'black',
        paddingHorizontal: 50,
        paddingVertical: 25,
        margin: 10,
        borderRadius: 5
    },
    buttonText: {
        color: 'white',
        fontSize: 40
    }
});
Đính kèm
Bạn cảm thấy bài viết này như thế nào?

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.
9 + 5 =
Solve this simple math problem and enter the result. E.g. for 1+3, enter 4.