购物车实现 React-Redux

Question

我正在使用 react-redux 实现购物车。 我有两个减速器， 1.从数据库中获取购物车数据 2. 进行各种购物车操作。

我的疑问是在通过第一个 reducer 从 DB 获取数据后，我将如何通过第二个 reducer 访问该数据以执行不同的购物车操作？

Reducer 1 - 从数据库中获取数据

const initialState={
    loading:false,
    items:[], 
    error:false
}

const CartFetch=(state=initialState,action)=>{
    switch(action.type){
        
        case FETCHDATA : return { 
            ...state,loading:true ,error:false
        };

        case FETCHSUCCESS: return { 
            ...state,loading:false,
            items:[...action.payload]
        };

        case FETCHERROR : return { 
            ...state,loading:false,error:true
        };

        default: return state;
    }
}

获取操作

const fetch=()=>{
    return {
        type:FETCHDATA
    }
}

const success=(user)=>{
    return {
        type:FETCHSUCCESS,
        payload:user
    }
}

const error=()=>{
    return {
        type:FETCHERROR
    }
}

const fetchCartData=()=>{

    const {id}=getCurrentUser();

    return (dispatch)=>{
        dispatch(fetch());
        axios.get(`${api.userOperations}/cart/${id}`,{
            headers:{'Authorization': getJwt()}
        }).then(({data})=>{
            dispatch(success(data));
        }).catch(()=>{
            dispatch(error())
        })
    }
}

Reducer 2 - 购物车操作

const CartHandle=(state= ..?.. ,action)=>{

        switch(action.type){
            
            case ADD_TO_CART :
            return {
                ......
            };

            case INCREMENT_CART : return { 
                ....
            };

            case DECREMENT_CART: return { 
                ......
            };

            case REMOVE_FROM_CART : return { 
                .....
            };

            default: return state;
        }
    }
}

在 Reducer 2 中，我将如何访问我在 Reducer 1 中获取的数据？或者有没有更好的方法来实现我想要的？

组合减速器

const allReducer=combineReducers({
    Cart:CartFetch,
    CartOperations: CartHandle
});

商店

const countStore=createStore(allReducer,applyMiddleware(thunk));

<Provide store={store}>

...App.js...

</Provider>

Answer 1

问题

您似乎还没有完全理解 reducer 代表什么。每个 reducer 代表一个特定的“块”或状态片。没有两个 reducer 在同一个状态片上运行/操作。换句话说，两个独立的 reducer 等于两个独立的状态切片。

解决方案

由于 reducer 代表特定的状态切片，它需要处理与该切片关联的所有操作。您只需要将第二个减速器合并到第一个减速器中，它就可以完全管理购物车状态。

const initialState = {
  loading: false,
  items: [],
  error: false
};

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCHDATA:
      return {
        ...state,
        loading: true,
        error: false
      };

    case FETCHSUCCESS:
      return {
        ...state,
        loading: false,
        items: [...action.payload]
      };

    case FETCHERROR:
      return {
        ...state,
        loading: false,
        error: true
      };

    case ADD_TO_CART:
      return {
        // ......
      };

    case INCREMENT_CART:
      return {
        // ....
      };

    case DECREMENT_CART:
      return {
        // ......
      };

    case REMOVE_FROM_CART:
      return {
        // .....
      };

    default:
      return state;
  }
};

创建你的根 reducer，每个组合的 reducer 代表一个状态切片。

const allReducer = combineReducers({
  // ... other state slice reducers
  cart: cartReducer,
  // ... other state slice reducers
});