Добрый день
У меня есть, action и reducer отбирают категории товаров и отображают их.
Action
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
import { API_ALL_CATEGORY } from '../../utils/Config';
import { timeoutPromise } from '../../utils/Tools';
export const FETCH_ALLCATEGORY = 'FETCH_ALLCATEGORY';
export const ALLCATEGORY_LOADING = 'ALLCATEGORY_LOADING';
export const ALLCATEGORY_FAILURE = 'ALLCATEGORY_FAILURE';
export const fetchALLCategory = (id_category) => {
const dataObj = {};
dataObj.cat_id = id_category;
return async (dispatch) => {
dispatch({ type: ALLCATEGORY_LOADING });
try {
const response = await timeoutPromise(
fetch(`${API_ALL_CATEGORY}`, {
method: "POST",
headers: {
'Content-Type':'application/json'
},
body: JSON.stringify(dataObj)
})
.catch((error) => console.log('Error vnature'))
);
if (!response.ok) {
dispatch({ type: ALLCATEGORY_FAILURE });
throw new Error("Что-то пошло не так!, не могу получить данные(категории).");
}
const resData = await response.json();
dispatch({
type: FETCH_ALLCATEGORY,
categories: resData
})
} catch (err) {
throw err;
}
}
}
Reducer
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
import {
FETCH_ALLCATEGORY,
ALLCATEGORY_FAILURE,
ALLCATEGORY_LOADING
} from './screenCtlgCatAction';
const initialState = {
categories: [],
isLoading: false
};
export const screenCtlgCatReducer = (state = initialState, action) => {
switch (action.type) {
case ALLCATEGORY_LOADING:
return {
...state,
isLoading: true
};
case ALLCATEGORY_FAILURE:
return {
...state,
isLoading: false
};
case FETCH_ALLCATEGORY:
return {
...state,
categories: action.categories,
isLoading: false
};
default:
return state;
}
}
Они отображают информацию в компоненте
CatalogScreen
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
export const CatalogScreen = ({ navigation }) => {
const dispatch = useDispatch();
const all_ctg = useSelector((state) => state.all_categories.categories);
const LoadingAllCat = useSelector((state) => state.all_categories.isLoading);
// console.log(all_ctg);
//fetch api categories
useEffect(() => {
const fetching = async() => {
try {
await dispatch(fetchALLCategory(0));
} catch (err) {
alert(err);
}
};
fetching();
}, []);
return (
<View style={styles.container}>
<Header navigation={navigation} />
{ LoadingAllCat ? (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Загрузка данных...</Text>
</View>
) : (
<FlatList
data={ all_ctg }
keyExtractor={item => item.category_id.toString()}
contentContainerStyle={{
padding: SPACING,
//paddingTop: StatusBar.currentHeight || 42
}}
renderItem={ ({ item, index }) => {
return (
<TouchableOpacity style={{
flexDirection: 'row',
padding: SPACING + 5,
marginBottom: SPACING,
backgroundColor: 'rgba(255,255,255,0.8)',
borderRadius: 12,
shadowColor: Colors.black,
shadowOffset: { width: 0, height: 5 },
shadowOpacity: .3,
shadowRadius: 20,
elevation: 50
}}
onPress={() =>
navigation.navigate('CatalogItemScreen', {
categoryId : item.category_id,
categoryTitle : item.name
})
}
>
<Image
source={{ uri: item.thumb }}
style={{
width: IMAGE_SIZE,
height: IMAGE_SIZE,
borderRadius: 20,
marginRight: 20
}}
/>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text
style={{
fontSize: 20,
fontFamily: 'Roboto-Bold'
}}
>
{ item.name }
</Text>
</View>
</TouchableOpacity>
)
}}
/>
)}
</View>
);
}
Это компонент где отображаются подкатегории
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
export const CatalogItemScreen = ({ route, navigation }) => {
//const { navigation, route } = this.props;
const { categoryId, categoryTitle } = route.params;
const dispatch = useDispatch();
const cur_ctg = useSelector((state) => state.itemCategory.childcategory);
const LoadingCurCat = useSelector((state) => state.itemCategory.isLoading);
//fetch api current categories
useEffect(() => {
const fetching = async() => {
try {
await dispatch(fetchALLCategory(categoryId));
} catch (err) {
alert(err);
}
};
fetching();
}, []);
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }} >
<Text>CataloItemScreen - {categoryId} : {categoryTitle}</Text>
</View>
)
}
Так же есть tabBottom по нажатию которой вызывается CatalogScreen
У каждой категории есть подкатегории, то есть дочернии категории.
Когда на нажимаю на какую нибудь категорию, у которой есть подкатегория, то отображаются эти подкатегории.
Но когда возвращаюсь обратно в CatalogScreen у меня вместо , того чтобы отображались родительские категории у меня отображается подкатегории, выбранной категории.
Как сделать так , чтоб у меня отображалось снова родительские категории
