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/native v5.7.3, @react-navigation/stack v5.9.0, redux v4.0.5 및 react- redux v7.2.1.

1단계 — 프로젝트 설정 및 Redux 설치

이 자습서에서는 MySocialNetwork에서 수정된 버전의 코드를 사용합니다.

  1. git clone https://github.com/do-community/MySocialNetwork.git

그런 다음 프로젝트 디렉터리로 이동합니다.

  1. cd MySocialNetwork

git 분기를 redux-starter로 변경합니다.

  1. git checkout redux-starter

다음으로 프로젝트 종속 항목을 설치합니다.

  1. npm install

그런 다음 프로젝트에 redux 및 react-redux 라이브러리를 설치합니다.

  1. npm install redux@4.0.5 react-redux@7.2.1

이제 프로젝트가 설정되었고 종속 항목이 설치되었습니다.

2단계 - 리듀서 만들기

Redux를 앱에 연결하려면 리듀서와 액션을 만들어야 합니다.

먼저 친구 감속기를 만듭니다. 감속기는 이전 상태와 작업을 인수로 사용하고 새 상태를 반환하는 순수 함수입니다. 감속기는 친구의 현재 상태가 변경될 때 앱 전체에서 최신 상태로 유지하는 데 중요한 역할을 합니다.

프로젝트의 루트 수준에서 FriendsReducer.js 파일을 만듭니다.

  1. 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 파일을 만듭니다.

  1. nano FriendsActions.js

addFriend 추가:

export const addFriend = friendsIndex => (
  {
    type: 'ADD_FRIEND',
    payload: friendsIndex,
  }
);

사용자가 친구를 클릭하면 이 코드는 friends.possible 배열에서 friendsIndex를 검색합니다. 이제 해당 인덱스를 사용하여 이 친구를 friends.current 배열로 이동해야 합니다.

FriendsReducer.js를 다시 방문하십시오.

  1. 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를 엽니다.

  1. 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 파일을 엽니다.

  1. 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 열기:

  1. 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 파일을 만듭니다.

  1. 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도 사용합니다.

  1. 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 주제 페이지를 살펴보세요.