Giới thiệu về cách sử dụng Redux trong ứng dụng React Native
Redux là một containers trạng thái có thể dự đoán được cho các ứng dụng JavaScript. Nếu Redux chưa quen với bạn, ta khuyên bạn nên xem phần giới thiệu của ta về Redux . Trong bài viết này, bạn sẽ học cách duy trì dữ liệu user bằng Redux trong ứng dụng React Native. Ứng dụng này là một mạng xã hội giả lập với HomeScreen hiển thị số lượng bạn bè đã kết nối và FriendsScreen bạn bè hiển thị danh sách bạn bè tiềm năng để thêm. Bạn sẽ sử dụng Redux để chia sẻ trạng thái giữa hai màn hình.
Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần :
- Môi trường phát triển local cho Node.js. Làm theo Cách cài đặt Node.js và Tạo môi trường phát triển local .
- Quen thuộc với việc cài đặt môi trường của bạn để tạo một dự án React Native mới và việc sử dụng trình mô phỏng iOS hoặc Android có thể có lợi.
Hướng dẫn này dựa trên các chủ đề được đề cập trong Cách sử dụng Định tuyến với Điều hướng React trong React Native . Bạn nên đọc hướng dẫn này để biết thêm ngữ cảnh về cách dự án hoạt động, nhưng không bắt buộc.
Hướng dẫn này đã được xác minh với Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/native v5.7.3, @react-navigation/stack v5.9.0, redux v4. 0.5 và react react-redux v7.2.1.
Bước 1 - Cài đặt dự án và cài đặt Redux
Hướng dẫn này sẽ sử dụng version đã sửa đổi của mã trong Cách sử dụng định tuyến với Điều hướng React trong React Native . Để bắt đầu, hãy sao chép MySocialNetwork :
- git clone https://github.com/do-community/MySocialNetwork.git
Sau đó, chuyển đến folder dự án:
- cd MySocialNetwork
Thay đổi nhánh git thành redux-starter :
- git checkout redux-starter
Tiếp theo, cài đặt các phụ thuộc dự án:
- npm install
Sau đó, cài đặt redux và react-redux thư viện trong dự án:
- npm install redux@4.0.5 react-redux@7.2.1
Dự án của bạn hiện đã được cài đặt và các phụ thuộc của bạn đã được cài đặt.
Bước 2 - Tạo hộp giảm tốc
Để kết nối Redux với ứng dụng của bạn, bạn cần tạo một trình giảm bớt và một hành động .
Đầu tiên, bạn sẽ tạo một bộ giảm bớt bạn bè. Bộ giảm là một hàm thuần túy lấy trạng thái trước đó và một hành động làm đối số và trả về trạng thái mới. Công cụ giảm thiểu là công cụ để giữ cho trạng thái hiện tại của bạn bè được cập nhật trong ứng dụng khi nó thay đổi.
Tạo file FriendsReducer.js ở cấp cơ sở của dự án:
- nano FriendsReducer.js
Thêm mã sau:
import { combineReducers } from 'redux'; const INITIAL_STATE = { current: [], possible: [ 'Alice', 'Bob', 'Sammy', ], }; const friendsReducer = (state = INITIAL_STATE, action) => { switch (action.type) { default: return state } }; export default combineReducers({ friends: friendsReducer }); Trong file này, bạn tạo một biến INITIAL_STATE với những người bạn có thể có để thêm vào mạng xã hội của bạn. Sau đó, bạn đang xuất friendsReducer dưới dạng tài sản được gọi là friends .
Với tính năng giảm thiểu của bạn, bạn cần một cách để thêm bạn bè.
Bước 3 - Tạo một Hành động
Các hành động là các đối tượng JavaScript đại diện cho dung lượng thông tin gửi dữ liệu từ ứng dụng của bạn đến cửa hàng Redux .
Các hành động có một loại và một trọng tải tùy chọn. Trong hướng dẫn này, kiểu sẽ là ADD_FRIEND và trọng tải sẽ là index mảng của một người bạn mà bạn đang thêm vào mảng bạn bè current .
Tạo file FriendsActions.js ở cấp cơ sở của dự án:
- nano FriendsActions.js
Thêm addFriend :
export const addFriend = friendsIndex => ( { type: 'ADD_FRIEND', payload: friendsIndex, } ); Khi user nhấp vào một người bạn, mã này sẽ truy xuất friendsIndex từ mảng friends.possible . Đến đây bạn cần sử dụng index đó để di chuyển người bạn này vào mảng friends.current .
Xem lại FriendsReducer.js :
- nano FriendsReducer.js
Thêm ADD_FRIEND :
// ... const friendsReducer = (state = INITIAL_STATE, action) => { switch (action.type) { case 'ADD_FRIEND': // Pulls current and possible out of previous state // We do not want to alter state directly in case // another action is altering it at the same time const { current, possible, } = state; // Pull friend out of friends.possible // Note that action.payload === friendIndex const addedFriend = possible.splice(action.payload, 1); // And put friend in friends.current current.push(addedFriend); // Finally, update the redux state const newState = { current, possible }; return newState; default: return state } }; // ... Mã này kéo bạn bè hiện tại và có thể ra khỏi trạng thái trước đó. Array.splice() truy xuất bạn bè từ mảng những người bạn có thể có. Array.push thêm bạn bè vào mảng bạn bè hiện tại. Sau khi thay đổi nhiệt được thực hiện, trạng thái được cập nhật.
Bây giờ, bạn có một bộ giảm tốc và một hành động. Bạn cần phải áp dụng bộ giảm tốc cho ứng dụng của bạn .
Bước 4 - Thêm Công cụ giảm vào ứng dụng
Bạn cần cung cấp trạng thái friends của ứng dụng của bạn bằng thành phần Provider của React Redux .
Mở App.js :
- nano App.js
Provider nhập khẩu, createStore và bạn friendsReducer :
import 'react-native-gesture-handler'; import React from 'react'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import { StyleSheet } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import friendsReducer from './FriendsReducer'; import HomeScreen from './HomeScreen'; import FriendsScreen from './FriendsScreen'; // ... Thêm và thay thế mã được đánh dấu bằng createStore và Provider :
// ... const store = createStore(friendsReducer); class App extends React.Component { // ... render() { return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Friends" component={FriendsScreen} /> </Stack.Navigator> </NavigationContainer> </Provider> ) } } Như vậy, friends có thể truy cập trong ứng dụng của bạn, nhưng bạn vẫn cần thêm họ vào HomeScreen và FriendsScreen .
Bước 5 - Thêm Redux vào màn hình
Trong bước này, bạn sẽ giúp friends có thể truy cập vào màn hình của bạn bằng chức năng mapStateToProps . Chức năng này ánh xạ state từ FriendsReducer đến các props trong hai màn hình.
Hãy bắt đầu với HomeScreen.js . Mở file HomeScreen.js :
- nano HomeScreen.js
Thêm và thay thế các dòng mã được đánh dấu trong HomeScreen.js :
import React from 'react'; import { connect } from 'react-redux'; import { StyleSheet, Text, View, Button } from 'react-native'; class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>You have (undefined) friends.</Text> <Button title="Add some friends" onPress={() => this.props.navigation.navigate('Friends') } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); const mapStateToProps = (state) => { const { friends } = state return { friends } }; export default connect(mapStateToProps)(HomeScreen); Thay đổi mã này bổ sung thêm react-redux và giúp friends có mặt trên HomeScreen .
Tiếp theo, thêm giá trị cho bạn bè hiện tại ( this.props.friends.current ):
class HomeScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>You have { this.props.friends.current.length } friends.</Text> <Button title="Add some friends" onPress={() => this.props.navigation.navigate('Friends') } /> </View> ); } } HomeScreen của bạn bây giờ sẽ hiển thị số lượng bạn bè hiện tại. Đến đây bạn có thể chuyển sang FriendsScreen .
Mở FriendsScreen.js :
- nano FriendsScreen.js
Thêm và thay thế các dòng mã được đánh dấu trong FriendsScreen.js :
import React from 'react'; import { connect } from 'react-redux'; import { StyleSheet, Text, View, Button } from 'react-native'; class FriendsScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>Add friends here!</Text> <Button title="Back to home" onPress={() => this.props.navigation.navigate('Home') } /> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); const mapStateToProps = (state) => { const { friends } = state return { friends } }; export default connect(mapStateToProps)(FriendsScreen); Sự thay đổi mã này bổ sung thêm react-redux và giúp friends có mặt trên FriendsScreen .
Thêm giá trị cho những người bạn có thể có ( props.friends.possible ):
class FriendsScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>Add friends here!</Text> { this.props.friends.possible.map((friend, index) => ( <Button key={ friend } title={ `Add ${ friend }` } /> )) } <Button title="Back to home" onPress={() => this.props.navigation.navigate('Home') } /> </View> ); } } Bây giờ khi bạn chuyển đến FriendsScreen bạn bè, bạn sẽ thấy tất cả những người bạn có thể có từ trình thu gọn.
Cuối cùng, thêm hành động addFriend mới của Redux vào FriendsScreen.js :
import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import { StyleSheet, Text, View, Button } from 'react-native'; import { addFriend } from './FriendsActions'; class FriendsScreen extends React.Component { render() { return ( <View style={styles.container}> <Text>Add friends here!</Text> { this.props.friends.possible.map((friend, index) => ( <Button key={ friend } title={ `Add ${ friend }` } onPress={() => this.props.addFriend(index) } /> )) } <Button title="Back to home" onPress={() => this.props.navigation.navigate('Home') } /> </View> ); } } // ... const mapDispatchToProps = dispatch => ( bindActionCreators({ addFriend, }, dispatch) ); export default connect(mapStateToProps, mapDispatchToProps)(FriendsScreen); Hãy thêm hai người bạn vào mạng xã hội và chuyển trở lại HomeScreen để xem user có bao nhiêu người bạn hiện tại:
Cùng với đó, bạn đã chuyển tất cả logic từ App.js vào Redux , điều này làm cho ứng dụng của bạn linh hoạt hơn nhiều, đặc biệt khi bạn thêm nhiều trang và tính năng như xác thực và tích hợp database .
Trước khi kết thúc, ta hãy xóa mã.
Bước 6 - Dọn dẹp
Đến đây bạn đang sử dụng Redux , bạn sẽ không cần các đạo cụ mà bạn đã chuyển từ App.js .
Bạn có thể tiến hành dọn dẹp thêm một bước nữa bằng cách lưu trữ các loại action của bạn trong một file riêng biệt.
Bạn đang sử dụng chuỗi 'ADD_FRIEND' ở hai nơi: trong action và reducer 'ADD_FRIEND' bạn bè. Điều này rất nguy hiểm, bởi vì nếu bạn thay đổi chuỗi ở một nơi chứ không phải nơi khác, bạn có thể phá vỡ ứng dụng của bạn . Khi ứng dụng của bạn phát triển, bạn nên giữ tất cả các loại action này trong một file có tên là types.js .
Tạo file types.js ở cấp cơ sở:
- nano types.js
Thêm mã sau:
export const ADD_FRIEND = 'ADD_FRIEND'; Sau đó, truy cập lại FriendsActions.js để sử dụng ADD_FRIEND mới:
nano FriendsActions.js Thay đổi 'ADD_FRIEND' được trích dẫn thành biến ADD_FRIEND trong action của bạn:
import { ADD_FRIEND } from './types'; export const addFriend = friendsIndex => ( { type: ADD_FRIEND, payload: friendsIndex, } ); Sau đó, hãy truy cập lại FriendsReducer.js để sử dụng ADD_FRIEND mới:
- nano FriendsReducer.js
Thay đổi niêm yết 'ADD_FRIEND' vào biến ADD_FRIEND trong bạn reducer :
import { combineReducers } from 'redux'; import { ADD_FRIEND } from './types'; // ... const friendsReducer = (state = INITIAL_STATE, action) => { switch (action.type) { case ADD_FRIEND: // ... default: return state; } }; Điều này làm cho ứng dụng ít mong manh hơn. Khi phát triển các ứng dụng của bạn , bạn nên lưu ý các cơ hội hợp nhất mã và tránh lặp lại chính mình.
Kết luận
Trong hướng dẫn này, bạn đã đề cập đến redux , bộ reducers , actions và quản lý dữ liệu có thể mở rộng.
Có rất nhiều điều bạn có thể làm với Redux, từ giữ dữ liệu đồng bộ với database , đến xác thực và theo dõi các quyền của user .
Mã nguồn hoàn chỉnh cho hướng dẫn này có sẵn trên GitHub .
Nếu bạn muốn tìm hiểu thêm về React, hãy xem loạt bài Cách viết mã trong React.js của ta hoặc xem trang chủ đề React của ta để biết các bài tập và dự án lập trình.
Các tin liên quan
