ReactNativeアプリでのReduxの使用の概要
序章
Redux は、JavaScriptアプリの予測可能な状態コンテナーです。 Reduxを初めて使用する場合は、Reduxの紹介を参照することをお勧めします。
この記事では、ReactNativeアプリケーションでReduxを使用してユーザーデータを永続化する方法を学習します。 アプリケーションは、模擬ソーシャルネットワークです。 HomeScreen
接続されている友達の数を表示し、 FriendsScreen
追加する潜在的な友達のリストを表示します。 Reduxを使用して、2つの画面間で状態を共有します。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsのローカル開発環境。 Node.jsをインストールしてローカル開発環境を作成する方法に従ってください。
- 新しいReactNativeプロジェクトを作成するための環境のセットアップと、iOSまたはAndroidシミュレーターの使用に精通していると役立つ場合があります。
このチュートリアルは、 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のクローンを作成します。
- 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—アクションを作成する
アクションは、アプリケーションからアプリケーションにデータを送信する情報のペイロードを表すJavaScriptオブジェクトです。 Redux
お店。
アクションには、タイプとオプションのペイロードがあります。 このチュートリアルでは、タイプは次のようになります ADD_FRIEND
、およびペイロードは、追加する友人の配列インデックスになります current
友達の配列。
を作成します FriendsActions.js
プロジェクトのルートレベルのファイル:
- nano FriendsActions.js
追加 addFriend
:
export const addFriend = friendsIndex => (
{
type: 'ADD_FRIEND',
payload: friendsIndex,
}
);
ユーザーが友達をクリックすると、このコードは friendsIndex
から friends.possible
配列。 次に、そのインデックスを使用して、この友達をに移動する必要があります 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—アプリにレデューサーを追加する
あなたは提供する必要があります friends
ReactReduxのプロバイダーコンポーネントを使用したアプリの状態。
開ける 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>
)
}
}
今 friends
アプリ内でアクセスできますが、それでもそれらをに追加する必要があります HomeScreen
と FriendsScreen
.
ステップ5—画面にReduxを追加する
このステップでは、 friends
で画面にアクセスできます mapStateToProps
関数。 この関数は、 state
から FriendsReducer
に props
2つの画面で。
から始めましょう 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
そして作る friends
利用可能 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>
);
}
}
君の HomeScreen
現在の友達の数が表示されます。 これで、に進むことができます 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
そして作る 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
:
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
ルートレベルのファイル:
- nano types.js
次のコードを追加します。
export const ADD_FRIEND = 'ADD_FRIEND';
その後、再訪 FriendsActions.js
新しいを使用するには ADD_FRIEND
:
nano FriendsActions.js
引用符を変更する 'ADD_FRIEND'
変数に ADD_FRIEND
あなたの中で action
:
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
あなたの中で 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;
}
};
これにより、アプリケーションの脆弱性が低下します。 アプリケーションを開発するときは、コードを統合し、自分自身を繰り返さないようにする機会に注意する必要があります。
結論
このチュートリアルでは、 redux
, reducers
, actions
、およびスケーラブルなデータ管理。
データをデータベースと同期させることから、認証やユーザー権限の追跡まで、Reduxでできることはもっとたくさんあります。
このチュートリアルの完全なソースコードは、GitHubで入手できます。
Reactの詳細については、 React.js シリーズのコーディング方法をご覧になるか、Reactトピックページで演習やプログラミングプロジェクトを確認してください。