title: How can I create a cart with reduxjs/toolkit?
body: <p>I am creating a cart for a mobile shop. I want to change it to work with @reduxjs/toolkit. I have the reducer code below that I need to change to run with reduxjs/toolkit</p>
  <pre><code>    import {
      ADD_TO_CART,
      REMOVE_FROM_CART,
      CLEAR_CART
  } from '../constants';
  
  const cartItems = (state = [], action) =&gt; {
      switch (action.type) {
          case ADD_TO_CART:
              return [...state, action.payload]
          case REMOVE_FROM_CART:
              return state.filter(cartItem =&gt; cartItem !== action.payload)
          case CLEAR_CART:
              return state = []
      }
      return state;
  }
  
  export default cartItems;
  </code></pre>
  <p>The output for the above is below array - which is what is getting pushed to Cart. I want to change the above code to work with reduxjs and output similar output as below and increment / decrement the cart quantity.</p>
  <pre><code>Array [
    Object {
      &quot;product&quot;: &quot;5f15d92ee520d44421ed8e9b&quot;,
      &quot;quantity&quot;: 1,
    },
    Object {
      &quot;product&quot;: &quot;62e5285f92b4fde9dc8a384c&quot;,
      &quot;quantity&quot;: 1,
    },
    Object {
      &quot;product&quot;: &quot;62e52c4892b4fde9dc8a3881&quot;,  
      &quot;quantity&quot;: 1,
    },
    Object {
      &quot;product&quot;: &quot;62e52c4892b4fde9dc8a3881&quot;,
      &quot;quantity&quot;: 1,
    },
  </code></pre>
  <p>]</p>
  <p>I have created the new store below</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    configureStore
  } from "@reduxjs/toolkit";
  import cartItems from "./Reducers/cartslice";
  import {
    combineReducers
  } from "redux";
  const reducer = combineReducers({
    cartItems: cartItems,
  });
  const store = configureStore({
    reducer,
  });
  export default store;</code></pre>
  </div>
  </div>
  </p>
  <p>I am stuck at creating a new reducer with reduxjs,  below is the code.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { createSlice } from '@reduxjs/toolkit';
  const cartItems = createSlice({
    name: 'cart',
    initialState: {cart:[]},
    reducers: {
      addToCart: (state, action) =&gt; {
        //What do I input here
      },
    },
  });
  export default cartItems.reducer;</code></pre>
  </div>
  </div>
  </p>