Thứ tư, 02/09/2020 | 00:00 GMT+7

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 :

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 reduxreact-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:

FriendsReducer.js
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 :

FriendsActions.js
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 :

FriendsReducer.js
// ...  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 :

App.js
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 createStoreProvider :

App.js
// ...  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 HomeScreenFriendsScreen .

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 :

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 ):

HomeScreen.js
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 :

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 :

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:

Một loạt ảnh chụp màn hình mô tả Màn hình chính và Màn hình bạn bè khi  user  thêm hai người bạn và một loạt những người bạn có thể có cũng như số lượng bạn bè hiện tại chuyển đổ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 actionreducer '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:

type.js
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:

FriendsActions.js
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 :

FriendsReducer.js
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.


Tags:

Các tin liên quan