反应挂钩。将值作为参数传递给 useReducer()

Question

这是我第一次使用 useReducer() 钩子，我面临一个问题，我需要向它传递一个值作为参数。

这是我的减速器的样子：

  const memoizedReducer = useCallback((state, action) => {
    switch (action.type) {
      case "save":
        const refreshedBookData = {
          ...state.bookData,
          ...(state.bookData.totalSaves >= 0 && {
            totalSaves: state.bookData.totalSaves + 1,
          }),
          isSaved: true,
        };
       
        // Add the new book data to a Map which I have in a Context provider
        currentUser.addBookToVisitedBooks(bookId, refreshedBookData);
        
        // Update my context provider data
        currentUser.setData((prevCurrentUserData) => {
          return {
            ...prevCurrentUserData,
            ...(prevCurrentUserData.totalSaves >= 0 && {
              totalSaves: prevCurrentUserData.totalSaves + 1,
            }),
          };
        });
        
        return refreshedBookData;

    case "unsave":
        const refreshedBookData = {
          ...state.bookData,
          ...(state.otheBookData.totalSaves >= 0 && {
            totalSaves: state.bookData.totalSaves - 1,
          }),
          isSaved: false,
        };

        // Add the new book data to a Map which I have in a Context provider
        currentUser.addBookToVisitedBooks(bookId, refreshedBookData);
      
        // Update my context provider data
        currentUser.setData((prevCurrentUserData) => {
          return {
            ...prevCurrentUserData,
            ...(prevCurrentUserData.totalSaves > 0 && {
              totalSaves: prevCurrentUserData.totalSaves - 1,
            }),
          };
        });
        
        return refreshedBookData;
      
    default:
        return state;
});


const [{ bookData }, dispatch] = useReducer(memoizedReducer, {
   bookData: params?.bookData
});

正如你所看到的，我正在做的是：

1-如果操作类型是“保存”，则增加书籍的总保存次数，将新书籍数据添加到我在上下文中拥有的“visitedBooks”地图（忽略这部分），并更新我的当前用户数据，增加他的总节省。

2-如果操作类型是“未保存”，我会执行相反的操作。

我的问题是我需要将参数“reviews”传递给reducer。例如，如果我有这个函数用于从我的数据库获取“额外数据”：

   const fetchReviews = async (bookId) => {
       // Get a list of reviews from the db
       const reviews = await db.fetchReviews(bookId);

       return reviews;
   }  

我这样使用它：

  const reviews = await fetchReviews(bookId);
  

我怎样才能将评论作为参数传递给减速器？

  dispatch({ type: saved ? "save" : "unsave" }); 

谢谢。

Answer 1

您已经将一个对象传递给dispatch()并且没有什么可以阻止您添加 apayload和type：

dispatch({ 
  type: saved ? "save" : "unsave",
  payload: reviews,
});

这样您就可以访问您的减速器 ( ) 中的评论action.payload。

const reducer = (state, action) => {
  // action has `type` and `payload` properties
}