序章

Redux は、JavaScriptアプリの予測可能な状態コンテナーです。 Reduxを初めて使用する場合は、Reduxの紹介を参照することをお勧めします。

この記事では、ReactNativeアプリケーションでReduxを使用してユーザーデータを永続化する方法を学習します。 アプリケーションは、模擬ソーシャルネットワークです。 HomeScreen 接続されている友達の数を表示し、 FriendsScreen 追加する潜在的な友達のリストを表示します。 Reduxを使用して、2つの画面間で状態を共有します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

このチュートリアルは、 ReactNativeでReactNavigationでルーティングを使用する方法で説明されているトピックに基づいています。 プロジェクトがどのように機能するかについての詳細は、このチュートリアルを読むことをお勧めしますが、必須ではありません。

このチュートリアルは、Nodev14.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

このチュートリアルでは、 ReactNativeでReactNavigationでルーティングを使用する方法のコードの修正バージョンを使用します。 開始するには、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

次のコードを追加します。

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—アクションを作成する

アクションは、アプリケーションからアプリケーションにデータを送信する情報のペイロードを表すJavaScriptオブジェクトです。 Redux お店。

アクションには、タイプとオプションのペイロードがあります。 このチュートリアルでは、タイプは次のようになります ADD_FRIEND、およびペイロードは、追加する友人の配列インデックスになります current 友達の配列。

を作成します FriendsActions.js プロジェクトのルートレベルのファイル：

  1. nano FriendsActions.js

追加 addFriend:

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

ユーザーが友達をクリックすると、このコードは friendsIndex から friends.possible 配列。 次に、そのインデックスを使用して、この友達をに移動する必要があります friends.current 配列。

再訪 FriendsReducer.js:

  1. nano FriendsReducer.js

追加 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
  }
};

// ...

このコードは、現在の友達と可能性のある友達を以前の状態から引き出します。 Array.splice() 可能な友達の配列から友達を取得します。 Array.push 友達を現在の友達の配列に追加します。 変更が加えられると、状態が更新されます。

これで、レデューサーとアクションができました。 アプリにレデューサーを適用する必要があります。

ステップ4—アプリにレデューサーを追加する

あなたは提供する必要があります friends ReactReduxのプロバイダーコンポーネントを使用したアプリの状態。

開ける App.js:

  1. nano App.js

輸入 Provider, createStore、 と 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';

// ...

強調表示されたコードを追加して、次のように置き換えます createStore と Provider:

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

今 friends アプリ内でアクセスできますが、それでもそれらをに追加する必要があります HomeScreen と FriendsScreen.

ステップ5—画面にReduxを追加する

このステップでは、 friends で画面にアクセスできます mapStateToProps 関数。 この関数は、 state から FriendsReducer に props 2つの画面で。

から始めましょう HomeScreen.js. を開きます HomeScreen.js ファイル：

  1. nano HomeScreen.js

で強調表示されたコード行を追加および置換します 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 そして作る friends 利用可能 HomeScreen.

次に、現在の友達の値を追加します（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 現在の友達の数が表示されます。 これで、に進むことができます FriendsScreen.

開ける FriendsScreen.js:

  1. nano FriendsScreen.js

で強調表示されたコード行を追加および置換します 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 そして作る friends 利用可能 FriendsScreen.

可能な友達の値を追加します（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:

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

ソーシャルネットワークに2人の友達を追加して、 HomeScreen ユーザーが現在何人の友達を持っているかを確認するには：

これで、すべてのロジックをから移動しました App.js の中へ Redux、これにより、特に認証やデータベース統合などのページや機能を追加するときに、アプリがはるかに柔軟になります。

まとめる前に、コードをクリーンアップしましょう。

ステップ6—クリーンアップ

今あなたが使用している Redux、あなたはあなたが渡していた小道具をもう必要としません App.js.

あなたはあなたのを保存することによってさらに一歩を片付けることができます action 別のファイルに入力します。

文字列を使用しています 'ADD_FRIEND' 2つの場所で： action と友達 reducer. これは危険です。文字列を一方の場所で変更し、もう一方の場所では変更しないと、アプリケーションが破損する可能性があるためです。 アプリが成長するにつれて、これらすべてを維持することは理にかなっています action と呼ばれるファイルを入力します types.js.

を作成します types.js ルートレベルのファイル：

  1. nano types.js

次のコードを追加します。

types.js
export const ADD_FRIEND = 'ADD_FRIEND';

その後、再訪 FriendsActions.js 新しいを使用するには ADD_FRIEND:

nano FriendsActions.js

引用符を変更する 'ADD_FRIEND' 変数に ADD_FRIEND あなたの中で action:

FriendsActions.js
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 あなたの中で 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;
  }
};

これにより、アプリケーションの脆弱性が低下します。 アプリケーションを開発するときは、コードを統合し、自分自身を繰り返さないようにする機会に注意する必要があります。

結論

このチュートリアルでは、 redux, reducers, actions、およびスケーラブルなデータ管理。

データをデータベースと同期させることから、認証やユーザー権限の追跡まで、Reduxでできることはもっとたくさんあります。

このチュートリアルの完全なソースコードは、GitHubで入手できます。

Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。