在redux工具箱中保持上一页的状态

Question

我将实现一个产品页面，其中包含类似的产品。当我点击类似的产品组件时，它应该打开相同的屏幕组件，并在导航历史中保留以前的产品屏幕。

有人能帮我吗？

productSlice.js

const productSlice = createSlice({
name: "product",
initialState: {
product: null,
loading: false,
},
reducers: {
getProductStart: (state) => {
state.loading = true;
},
getProductSuccess: (state, { payload }) => {
state.product = payload;
state.loading = false;
},
getProductFailure: (state, { payload }) => {
state.loading = false;
},
},
});
const { actions, reducer } = productSlice;
export const productSelector = (state) => state.product;
export default reducer;
export function fetchProduct(id){
return dispatch => {
...
}
}

store.js

const reducers = combineReducers({
product: productReducer,
});
const store = configureStore({
reducer: reducers,
});
export default store;

ProductScreen.js

function ProductScreen({ navigation, route }) {
const dispatch = useDispatch();
const { product, loading } = useSelector(productSelector);
useEffect(() => {
dispatch(fetchProduct(route.params.id));
});
const openSimilarProduct = (id) => {
navigation.push("ProductScreen", { id });
}
return (
<View>
<Text>{product.name}</Text>
<Text>{product.description}</Text>
<View>
<Pressable onPress={() => openSimilarProduct(1)} >
<Text>Product #1</Text>
</Pressable>
</View>
</View>
);
}
export default ProductScreen;

Answer 1

电子商务应用程序中常见的模式是获取产品信息，然后获取类似的产品并在底部以网格的形式列出。

在高层，您需要获取产品信息，通过使用类型或类别等产品元数据，您可以获取具有类似属性的其他产品。用户不需要按下按钮来获取类似的产品。