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

Posted 2023-02-16

【中文标题】在 redux 工具包中保持上一页状态

【英文标题】：Keep previous page state in redux toolkit

【发布时间】：2022-01-15 18:09:39

【问题描述】：

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

有人可以帮帮我吗？

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;

【参考方案1】：

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

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