Lê Quang Huy lequanghuylc

It’s common these day when React & React Native developers use State management library (like Redux). I’ve been using React & React Native for a while now and found out that Pure React is actually not bad. In this article I will share my way of doing things with React & React Native purely, without State management library (represented by Redux).

For those of you who are struggling learning Redux, because of the overwhelming of the whole React/JSX/Babel/Webpack/Native Component/Native Module/.. and have to add Redux to the list just to solve some of React problems, or because of the high learning curve of Redux, I hope you find this article helpful.

Some of React problems with State Management

Assuming you have some knowledge of React, I will jump right in the problems that most of us encoutered at the beginning of time learning React:

Flow pass data down, pass event up makes us to pass data & function via props and it's hard to manage when amount of props gets huge. (Comunication between component

Đối với những bạn đã biết và sử dụng React & React Native thì việc dùng kèm 1 thư viện để quản lý state như Redux là điều rất phổ biến. Mình cũng sử dụng React được một thời gian tuy nhiên thời gian đầu mình hay sử dụng theo hướng thuần - không sử dụng thư viện riêng biệt để quản lý state (lấy Redux làm đại diện). Trong bài viết này mình sẽ chia sẻ và trao đổi một số tips khi làm việc với React & React Native theo hướng thuần.

Lưu ý:

Bài viết chỉ đơn giản là chia sẻ và trao đổi, không khuyến khích các bạn bỏ Redux, do vậy hãy giữ tư tưởng mở.
Để hiểu rõ bài viết thì nên có kiến thức về React, đối với những bạn mới tiếp xúc với React / React Native nếu gặp khó khăn trong việc học Redux (phải học trước một đống thứ như React, JSX, Babel, Webpack, Native Component & Native Module dẫn đến ngợp), thì hy vọng bài viết này sẽ cung cấp cho các bạn 1 cái gì đó để thoải mái hơn và vững vàng hơn trước khi học những cái mới.

Nhắc lại vấn đề quản lý state của React

Luồng dữ liệu `pass data down, pass event up

	sudo apt-get update
	echo "Install nodejs 12..."
	curl -sL https://deb.nodesource.com/setup_12.x \| sudo -E bash -
	sudo apt-get install -y nodejs
	echo "Install yarn..."
	curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg \| sudo apt-key add -
	echo "deb https://dl.yarnpkg.com/debian/ stable main" \| sudo tee /etc/apt/sources.list.d/yarn.list
	sudo apt update && sudo apt install yarn -y
	echo "Install pm2..."
	sudo npm i -g pm2

	credit: https://github.com/facebook/react-native/issues/19529

	rm -rf node_modules/ && yarn cache clean && yarn install
	node_modules/react-native/scripts/ios-install-third-party.sh
	cd node_modules/react-native/third-party/glog-0.3.4
	./configure

	const express = require('express');
	const proxy = require('http-proxy-middleware');
	const fs = require("fs");
	const { createServer } = require('https');

	const certOptions = {
	key: fs.readFileSync('/etc/letsencrypt/live/s1.example.com/privkey.pem'),
	cert: fs.readFileSync('/etc/letsencrypt/live/s1.example.com/fullchain.pem'),
	};

	import { Component } from "react";
	import PropTypes from "prop-types";

	export default class BaseComponent extends Component {

	static propTypes = {
	id: PropTypes.string
	}

	static States = {};

	import React, { Component } from 'react';
	import PropTypes from 'prop-types';

	class Root extends Component {

	static childContextTypes = {
	appState: PropTypes.func
	};

	getChildContext = () => {

	$ brew services stop postgresql
	$ rm /usr/local/var/postgres/postmaster.pid # adjust path accordingly to your install
	$ brew services start postgresql

	// import
	psql -h localhost -U user -W -d database_name -f path/to/file.sql

	// export