0

現在、React Native でアプリを開発しています。アプリの状態は非常に複雑ですが、Redux と Normalizr により管理可能です。ユーザーがアイテムをフィルタリングするための機能を実装する必要があります。

ユーザーがアイテムをフィルタリングできるように、Normalizr スキーマでサーバーの応答を強化しました。

export const subCategorySchema = new schema.Entity(
  "subCategories",
  {},
  {
    idAttribute: "uuid",
    processStrategy: entity => {
      const newEntity = Object.assign({}, { name: entity.name, uuid: entity.uuid, chosen: false });
      return newEntity;
    }
  }
);

対応するレデューサーは次のようになります。

const initialState = {};
const subCategoriesReducer = (state = initialState, action) => {
  if (action.payload && action.payload.entities) {
    return {
      ...state,
      ...action.payload.entities.subCategories
    };
  } else {
    return state;
  }
};

これらのサブカテゴリは、この SwitchListItem コンポーネントを使用して UI に表示されるようになり、セレクターを介してアイテムを取得します。

import React, { Component } from "react";
import { Switch, Text, View } from "react-native";
import PropTypes from "prop-types";

import styles, { onColor } from "./styles";

export default class SwitchListItem extends Component {
  static propTypes = {
    item: PropTypes.object
  };

  render() {
    const { name, chosen } = this.props.item;
    return (
      <View style={styles.container}>
        <Text style={styles.switchListText}>{name}</Text>
        <Switch style={styles.switch} value={chosen} onTintColor={onColor} />
      </View>
    );
  }
}

私は今、<Switch />コンポーネントのonValueChange()機能を実装しようとしていますが、ここで私の質問が発生しました:

正規化された状態ツリーでブール値を切り替える最良の方法は何ですか?

以下で説明する2つの解決策を思いつきました。この中で良いと思うものがあれば教えてください。そうでない場合は、もっとうまくできることについてアドバイスをもらいたいです:)

解決策 1: レデューサーの拡張:

この問題に対する私の最初の解決策は、reducer を拡張してTOGGLE_ITEMアクションをリッスンすることでした。これは次のようになります。

const subCategoriesReducer = (state = initialState, action) => {
  switch (action.type) {
    case TOGGLE_ITEM:
      if (action.payload.item.uuid in state) return { ...state, ...action.payload.item };
  }
  if (action.payload && action.payload.entities) {
    return {
      ...state,
      ...action.payload.entities.subCategories
    };
  } else {
    return state;
  }
};

多くのコードを必要としないため、これは私の好みのソリューションです。

解決策 2: に項目を渡すセレクターを充実させるSwitchList:

もう1つの解決策は、状態のキーを持つセレクターを使用して、リストに渡されるときにオブジェクトを充実させることです。次に、このキーを使用して状態を次のように更新するアクションを作成できます。

const toggleItem = (item, stateKey) => ({
  type: TOGGLE_ITEM,
  payload: {entities: { [stateKey]: item } }
})

Reduxの経験が豊富な場合は、できれば意見のある回答を読みたいです。また、ノーマライズでデータを強化する私の方法が悪いと思われ、より良い方法を思い付くことができる場合は、お知らせください! アドバイスをありがとうございました!

4

1 に答える 1