React Native 앱에서 Redux 사용 소개
소개
Redux 소개.
이 기사에서는 React Native 애플리케이션에서 Redux를 사용하여 사용자 데이터를 유지하는 방법을 배웁니다. 이 응용 프로그램은 연결된 친구 수를 표시하는 HomeScreen과 추가할 잠재적 친구 목록을 표시하는 FriendsScreen이 있는 모의 소셜 네트워크입니다. Redux를 사용하여 두 화면 간에 상태를 공유합니다.
전제 조건
이 자습서를 완료하려면 다음이 필요합니다.
- Node.js용 로컬 개발 환경입니다. Node.js 설치 및 로컬 개발 환경 생성 방법을 따르십시오.
- 새로운 React Native 프로젝트를 생성하고 iOS 또는 Android 시뮬레이터를 사용하기 위한 환경 설정에 익숙하면 도움이 될 수 있습니다.
이 튜토리얼은 React Native에서 React Navigation으로 라우팅을 사용하는 방법에서 다룬 주제를 기반으로 합니다. 프로젝트 작동 방식에 대한 자세한 내용은 이 자습서를 읽는 것이 좋지만 필수 사항은 아닙니다.
이 튜토리얼은 Node v14.7.0, npm v6.14.7, react v16.13.1, react-native v0.63.2, @react-navigation/stack v5.9.0, redux v4.0.5 및 react- redux v7.2.1.
1단계 — 프로젝트 설정 및 Redux 설치
이 자습서에서는 MySocialNetwork에서 수정된 버전의 코드를 사용합니다.
- git clone https://github.com/do-community/MySocialNetwork.git
그런 다음 프로젝트 디렉터리로 이동합니다.
- cd MySocialNetwork
git 분기를 redux-starter로 변경합니다.
- git checkout redux-starter
다음으로 프로젝트 종속 항목을 설치합니다.
- npm install
그런 다음 프로젝트에 redux 및 react-redux 라이브러리를 설치합니다.
- npm install redux@4.0.5 react-redux@7.2.1
이제 프로젝트가 설정되었고 종속 항목이 설치되었습니다.
2단계 - 리듀서 만들기
Redux를 앱에 연결하려면 리듀서와 액션을 만들어야 합니다.
먼저 친구 감속기를 만듭니다. 감속기는 이전 상태와 작업을 인수로 사용하고 새 상태를 반환하는 순수 함수입니다. 감속기는 친구의 현재 상태가 변경될 때 앱 전체에서 최신 상태로 유지하는 데 중요한 역할을 합니다.
프로젝트의 루트 수준에서 FriendsReducer.js 파일을 만듭니다.
- nano 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
});
이 파일에서 소셜 네트워크에 추가할 수 있는 친구로 INITIAL_STATE 변수를 만듭니다. 그런 다음 friendsReducer를 friends라는 속성으로 내보냅니다.
감속기가 제자리에 있으면 친구를 추가하는 방법이 필요합니다.
3단계 - 작업 생성
액션은 애플리케이션에서 Redux 스토어로 데이터를 보내는 정보 페이로드를 나타내는 JavaScript 객체입니다.
작업에는 유형과 선택적 페이로드가 있습니다. 이 자습서에서 유형은 ADD_FRIEND이고 페이로드는 현재 친구 배열에 추가하려는 친구의 배열 인덱스입니다.
프로젝트의 루트 수준에서 FriendsActions.js 파일을 만듭니다.
- nano FriendsActions.js
addFriend 추가:
export const addFriend = friendsIndex => (
{
type: 'ADD_FRIEND',
payload: friendsIndex,
}
);
사용자가 친구를 클릭하면 이 코드는 friends.possible 배열에서 friendsIndex를 검색합니다. 이제 해당 인덱스를 사용하여 이 친구를 friends.current 배열로 이동해야 합니다.
FriendsReducer.js를 다시 방문하십시오.
- nano FriendsReducer.js
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
}
};
// ...
이 코드는 현재 친구와 가능한 친구를 이전 상태에서 끌어냅니다. Array.splice()는 가능한 친구 배열에서 친구를 검색합니다. Array.push는 친구를 현재 친구 배열에 추가합니다. 변경 후 상태가 업데이트됩니다.
이제 리듀서와 액션이 있습니다. 감속기를 앱에 적용해야 합니다.
4단계 - 앱에 감속기 추가
React Redux의 Provider 구성 요소를 사용하여 앱의 friends 상태를 제공해야 합니다.
App.js를 엽니다.
- nano App.js
Provider, createStore 및 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';
// ...
강조 표시된 코드를 createStore 및 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>
)
}
}
이제 친구는 앱 내에서 액세스할 수 있지만 여전히 HomeScreen 및 FriendsScreen에 친구를 추가해야 합니다.
5단계 — 화면에 Redux 추가
이 단계에서는 mapStateToProps 함수를 사용하여 화면에서 친구에 액세스할 수 있도록 합니다. 이 함수는 두 화면에서 FriendsReducer의 state를 props에 매핑합니다.
HomeScreen.js부터 시작하겠습니다. HomeScreen.js 파일을 엽니다.
- nano 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);
이 코드 변경은 react-redux를 추가하고 친구를 HomeScreen에서 사용할 수 있게 합니다.
다음으로 현재 친구(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>
);
}
}
이제 홈 화면에 현재 친구 수가 표시됩니다. 이제 FriendsScreen으로 이동할 수 있습니다.
FriendsScreen.js 열기:
- nano 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);
이 코드 변경으로 react-redux가 추가되고 FriendsScreen에서 friends를 사용할 수 있습니다.
가능한 친구에 대한 값을 추가합니다(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>
);
}
}
이제 FriendsScreen으로 이동하면 감속기에서 가능한 모든 친구를 볼 수 있습니다.
마지막으로 새 Redux addFriend 작업을 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);
두 명의 친구를 소셜 네트워크에 추가하고 HomeScreen으로 다시 이동하여 현재 친구가 몇 명인지 확인합니다.
이를 통해 App.js의 모든 로직을 Redux로 이동했으며, 이는 특히 인증 및 데이터베이스와 같은 더 많은 페이지와 기능을 추가할 때 앱을 훨씬 더 유연하게 만듭니다. 완성.
끝내기 전에 코드를 정리합시다.
6단계 - 정리
이제 Redux를 사용하고 있으므로 App.js에서 전달했던 소품이 더 이상 필요하지 않습니다.
별도의 파일에 action 유형을 저장하여 한 단계 더 정리할 수 있습니다.
action과 친구 reducer의 두 위치에서 문자열 ADD_FRIEND를 사용하고 있습니다. 한 곳에서만 문자열을 변경하고 다른 곳에서는 변경하지 않으면 응용 프로그램이 중단될 수 있기 때문에 이것은 위험합니다. 앱이 성장함에 따라 이러한 모든 action 유형을 types.js라는 파일에 보관하는 것이 좋습니다.
루트 수준에서 types.js 파일을 만듭니다.
- nano types.js
다음 코드를 추가합니다.
export const ADD_FRIEND = 'ADD_FRIEND';
그런 다음 FriendsActions.js를 다시 방문하여 새 ADD_FRIEND를 사용합니다.
nano FriendsActions.js
action에서 따옴표로 묶인 ADD_FRIEND를 변수 ADD_FRIEND로 변경합니다.
import { ADD_FRIEND } from './types';
export const addFriend = friendsIndex => (
{
type: ADD_FRIEND,
payload: friendsIndex,
}
);
그런 다음 FriendsReducer.js를 다시 방문하여 새 ADD_FRIEND도 사용합니다.
- nano FriendsReducer.js
인용된 ADD_FRIEND를 리듀서의 변수 ADD_FRIEND로 변경합니다.
import { combineReducers } from 'redux';
import { ADD_FRIEND } from './types';
// ...
const friendsReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case ADD_FRIEND:
// ...
default:
return state;
}
};
이렇게 하면 애플리케이션이 덜 취약해집니다. 애플리케이션을 개발할 때 코드를 통합하고 반복을 피하는 기회를 알고 있어야 합니다.
결론
이 튜토리얼에서는 redux, reducers, actions 및 확장 가능한 데이터 관리를 다루었습니다.
데이터를 데이터베이스와 동기화하는 것부터 인증 및 사용자 권한 추적에 이르기까지 Redux로 할 수 있는 일이 훨씬 더 많습니다.
이 자습서의 전체 소스 코드는 GitHub에서 사용할 수 있습니다.
React에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 React 주제 페이지를 살펴보세요.