Question

我正在使用react native和redux与react-native-router-flux构建一个简单的应用程序。由于我选择解决问题的方法，我面临死胡同。我的应用程序有2个大数据集产品和类别。我有三个屏幕

主屏幕
类别屏幕
产品界面

当应用程序启动时，我正在发出两个ajax请求，一个用于获取产品，另一个用于获取类别。当请求解决时，我将数据存储在商店

{ products: [...], categories: [...]}

我面临的问题是在类别屏幕中。从类别屏幕，应用程序呈现项目列表，并通过单击每个项目我发送操作以执行操作['场景名称']，路由回相同的列表组件，但这次提供单击的类别ID。因此，我将使用此技术将父类中的整个类别树呈现给儿童。当没有任何子类别并且我必须切换到另一个组件并显示产品时，就会出现问题。

每次发生操作时，我都必须过滤产品数组（每个项目包含一个包含产品类别ID的数组）以查找类别产品

我觉得我已经解决了这个问题，我正在寻求一些关于如何在redux中存储数据以及使用路由器在Activities之间导航的指导。

我不知道我是否已经解释了这个问题。到目前为止，我的工作的一些片段

action.js

export const selectCategory = ({ title, id }) => {
    Actions.subCategoryList({ title, id });
    return ({
      type: SELECT_CATEGORY_PRODUCTS,
      payload: id
    });
  };

subCategoryList.js

render() {
            return (
                <FlatList
                    style={{ backgroundColor: '#FFF' }}
                    data={this.props.categories}
                    renderItem={({ item }) => <CategoryListItem category={item} />}
                    keyExtractor={(item, index) => index}
                />
            );
        }

        const mapStateToProps = (state, ownProps) => {
        const categories = state.categories.filter((item) => {
            if (item.parentid === ownProps.id) return true;
            return false;
        });

        return {
            categories,
            category_products: state.products.selected_category_products
        };
    };

categoryListItem.js

categoryItemPressed() {
    this.props.selectCategory(this.props.category);
}

render() {
    const { category } = this.props;

    return (
        <TouchableOpacity 
            style={this.styles.buttonStyle} 
            onPress={() => this.categoryItemPressed()}
        >
            <View style={this.styles.containerStyle}>
                <Text style={this.styles.textStyle}>{category.title}</Text>
            </View>
        </TouchableOpacity>
    );
}

export default connect(null, { selectCategory })(CategoryListItem);

使用Redux React Native，从操作和stracture问题访问状态

0 个答案: