reducerのfunctionを動かしたい（redux）

Question

こちらの質問で、Reduxを通してエラーモーダルを表示させるための質問をしたのですが、やはり上手くいかなかったので、再度質問させていただきます。

エラー

  onError is not found.

Reducerの中にonError()を書いていないので当たり前ではあるのですが、Reducerの中にAlert文を書くのは不整合であるように感じます。
Reducerで起こしたonError()アクションをどのようにすれば、View上のonError()を起こすのに繋がるのかが知りたいところです。

ソースコード

actions

・・・
export const userCreate = ({ user }) => {
  return (dispatch) => {
      firebase.database().ref(`/users/`)
        .set({
          user
        })
        .then(() => {
        dispatch({ type: 'user_save_success' });
      });
    })
    .catch(err => {
       dispatch({ type: 'USER_SAVE_FAIL' });
    });
  }
}
・・・

reducer

export default (state = initialState, action) => {
  switch(action.type) {
    case 'USER_UPDATE':
      return { ...state, [action.payload.prop]: action.payload.value };
    case 'USER_SAVE_SUCCESS':
      return { initialState, successModal: true };
    case 'USER_SAVE_FAIL':
      return { ...state, failedModal: true };
    default:
      return state;
  }
};

View（UserCreate.js）

class CreditCard extends React.Component {
  state = {
    showModal: false,
    error: null
  };

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      headerTitle: 'ユーザーの新規作成',
      headerLeft: (
        <TouchableOpacity
          onPress={()=> navigation.goBack()}
          style={styles.headerIcon}
        >
          <Icon name='chevron-left' size={28} style={{color: '#fff'}}/>
        </TouchableOpacity>
      ),
      headerRight: (
        <TouchableOpacity
          onPress={() => params.handleSave()}
        >
         <Text style={styles.headerBtn}>{I18n.t('save')}</Text>
        </TouchableOpacity>
      ),
      headerStyle: {
        backgroundColor: Theme.PRIMARY,
      },
      headerTitleStyle: {
        color: '#fff',
        fontWeight: 'bold'
      }
    };
  };

  onButtonPress() {
    const { firstName, lastName } = this.props;

    this.props.userCreate({ firstName, lastName });
  }

  componentDidMount() {
    this.props.navigation.setParams({ handleSave: this.onButtonPress.bind(this) });
  }

  render() {
    if(this.props.error === true) {
      Alert.alert(
        'エラーが発生しました',
        [
          {text: 'キャンセル', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
          {text: 'はい', onPress: () => this.onConfirmReport()},
        ],
        { cancelable: false }
      )
    }

    return (
      <View>
          <TextInput
            value={this.props.firstName}
            onChangeText={value => this.props.userUpdate({ prop: 'firstName', value })}
          />
          <Input
            value={this.props.lastName}
            onChangeText={value => this.props.userUpdate({ prop: 'lastName', value })}
          />
      </View>
    );
  }
}

const mapStateToProps = (state) => {
  const { firstName, lastName } = state.userForm;

  return { firstName, lastName };
};

export default connect(mapStateToProps, {
  userUpdate, userCreate
})(UserCreate);

ここでいうUserCreate.jsのonErrorを動かしたいです。
どうぞよろしくお願いいたします。

Answer 1

前回の質問の続きですね。もう少し具体的に書きます。
とはいえ、ざっくり回答ですが、ご参考までにどうぞ！

action

export const userCreate = ({ user }) => {
	return (dispatch) => {
			// 省略
		})
		.catch(error => {
			 dispatch({ 
				type: 'USER_SAVE_FAIL', 
				payload: error, 
				error: true, // オプション 
				meta: {} // オプション
			 });
				 
		});
	}
}

参考：https://github.com/redux-utilities/flux-standard-action　- 「Flux Standard Action
」というaction objectの形式のスタンダードみたいなものが提唱されていて、この形式に従ってライブラリーを作るライブラリーオーサーもそれなりに多いようです。typeとpayloadは必須。errorとmetaプロパティーは任意という感じの形式ですね。

reducer

// usersReducer.js

const initialState = {
  users: [],
  isFetching: false, //API通信中かどうか(読み込み中かどうか）
  error: null // API通信周りのerrorオブジェクトが入る
}

export default (state = initialState, action) => {
	// 省略
	// action.typeやaction.errorに応じて、stateを変える
}

参考：https://github.com/reduxjs/redux/blob/master/examples/real-world/src/reducers/index.js#L16 - リンク先コードのようにerror用のreducerを別途に用意するパターンも有り。

component / container

//省略
// this.props.isFetchingがtrueならローディングアイコンを表示するなど
// this.props.errorがnullじゃない場合は、アラートを表示したり、通信実行のリトライボタンを表示するなど

Comments

[yamady]

Hayatoさん、いつもありがとうございます！迅速なご回答で非常に助かっています！
（理解が悪く、なんどもお手数おかけします...汗）
Reducerからはstateの変更を送り返すことができるということですよね。別件の質問になると思うのですが、受け取ったView側でファンクションを条件によって押したり押さなかったりできる方法ってどれが正しいのでしょうか。

if(isFetching: true) {
・・・
}
とかだとエラーになってしまうんですよね。汗

[HayatoKamono]

こんにちは！すみません、別件の質問の意味がちょっとわからないです！

[yamady]

早速ありがとうございます！
一旦整理して再ポストします。！

[yamady]

//省略
// this.props.isFetchingがtrueならローディングアイコンを表示するなど
// this.props.errorがnullじゃない場合は、アラートを表示したり、通信実行のリトライボタンを表示するなど

これって componentDidMount() { }の中に書くのが正解なのでしょうか。
理解が悪くすみません。

[yamady]

ソースコードを更新してみたのですが、上手く通りませんでした（汗）

[HayatoKamono]

ライフサイクルメソッドの中ではなく、renderメソッドの中で、ですね。(追記- ライフサイクルメソッドでも適切なライフサイクルメソッドの中であればOKですが、render内がひとまず手っ取り早いかなと)

[yamady]

ありがとうございます！
```
render() {
if(this.props.failedModal === true) {
Alert.alert(
'エラーが発生しました',
[
{text: 'キャンセル', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
{text: 'はい', onPress: () => this.onConfirmReport()},
],
{ cancelable: false }
)
}

console.log('&&&&&&&');
return (
```
これでやってみたのですが、reduxが通ってきたあとに機能してくれませんでした。

[HayatoKamono]

「これでやってみたのですが、reduxが通ってきたあとに機能してくれませんでした。」について、具体的に説明すると、どういう状況でしょうか？ 説明が難しい、または苦手な場合は、必要なコードを全部載せてもらった方が早いかもしれません。

[yamady]

ご回答いただきまして、本当にありがとうございます！
説明が分かりづらくて申し訳ございません。
こちら、質問欄に再度記述させていただきます(_ _)

[yamady]

ご回答いただきまして、本当にありがとうございます！
説明が分かりづらくて申し訳ございません。
こちら、質問欄に再度記述させていただきます(_ _)

[HayatoKamono]

追記されたコード拝見したのですが、UserCreate.js内でthis.props.errorを参照出来る理由が掲載されている限られたコードから見えてこないです。なぜ、参照出来るのですか？

[HayatoKamono]

「ここでいうUserCreate.jsのonErrorを動かしたいです。」← そもそも、onErrorなるものがもはや見当たらないです。。。

[yamady]

ありがとうございます。一旦、すべて整理し直します(_ _)

[yamady]

Hayatoさん、ありがとうございます。色々と模索した結果、本質的ではありませんが、解決することができました(_ _)

[HayatoKamono]

おー、そう解決しましたか。そうじゃない感はありますが、とりあえず前に進むことは大事ですからね、その勢いで頑張ってください！

[yamady]

Hayatoさん、いつも本当にありがとうございます！
課題がここで解決する度にReact愛が深まっていきます！^^

Answer 2

        .catch(err => {
          dispatch({ type: 'user_save_failed' });
          Alert.alert(
            '失敗しました',
            '保存に失敗してしまいました。',
            [
              {text: 'OK', onPress: () => console.log('OK Pressed')},
            ],
            { cancelable: false }
          )

本質的な解決ではありませんが、reduxの中に関数を書くことで何とかやりたいことは実現できました。