I am dispatching saveShippingAddress from ShippingScreen.js and in redux devtools it shows saveShippingAddress being dispatched but the it's functionality in shippingAddressSlice.js is not working. I have tried to add other actions in reducers but they are also not working

ShippingScreen.js

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { Form, Button } from 'react-bootstrap';
import { useDispatch, useSelector } from 'react-redux';
import FormContainer from '../components/FormContainer';
import { saveShippingAddress } from '../features/shippingAddressSlice';
const ShippingScreen = () => {
  const cart = useSelector((store) => store.cart);
  const { shippingAddress } = cart;
  console.log(shippingAddress);
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [address, setAddress] = useState(shippingAddress.address);
  const [city, setCity] = useState(shippingAddress.city);
  const [postalCode, setPostalCode] = useState(shippingAddress.country);
  const [country, setCountry] = useState(shippingAddress.country);
  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(saveShippingAddress({ address, city, postalCode, country }));
    navigate('/payment');
  };
  return (
    <FormContainer>
      <h1>Shipping</h1>
      <Form onSubmit={submitHandler}>
        <Form.Group controlId='address'>
          <Form.Label>Address</Form.Label>
          <Form.Control
            type='address'
            placeholder='Enter Address'
            value={address ? address : ''}
            required
            onChange={(e) => setAddress(e.target.value)}
          ></Form.Control>
        </Form.Group>

        <Form.Group controlId='city'>
          <Form.Label>City</Form.Label>
          <Form.Control
            type='city'
            placeholder='Enter City'
            value={city ? city : ''}
            required
            onChange={(e) => setCity(e.target.value)}
          ></Form.Control>
        </Form.Group>

        <Form.Group controlId='postalCode'>
          <Form.Label>postalcode</Form.Label>
          <Form.Control
            type='text'
            placeholder='Enter postalcode'
            value={postalCode ? postalCode : ''}
            required
            onChange={(e) => setPostalCode(e.target.value)}
          ></Form.Control>
        </Form.Group>
        <Form.Group controlId='country'>
          <Form.Label>Country</Form.Label>
          <Form.Control
            type='text'
            placeholder='Enter Country name'
            value={country ? country : ''}
            required
            onChange={(e) => setCountry(e.target.value)}
          ></Form.Control>
        </Form.Group>
        <Button variant='primary' type='submit'>
          Continue
        </Button>
      </Form>
    </FormContainer>
  );
};
export default ShippingScreen;

shippingAddressSlice.js

import { createSlice } from '@reduxjs/toolkit';
const initialState = {
  cartItems: [],
  shippingAddress: {},
};
const shippingAddressSlice = createSlice({
  name: 'ShippingAddress',
  initialState,
  reducers: {
    saveShippingAddress: (state, action) => {
      console.log('hello');
      console.log(action.payload);
      // localStorage.setItem('shippingAdrress', JSON.stringify(action.payload));
      return {
        ...state,
        shippingAddress: action.payload,
      };
    },
  },
});
console.log(shippingAddressSlice);
export const { saveShippingAddress, closeModal } = shippingAddressSlice.actions;
export default shippingAddressSlice.reducer;

CodePudding user response：

Internaly createSlice reducers uses an immer. Could you try to change your reducer to:

saveShippingAddress: (state, action) => {
      console.log('hello');
      console.log(action.payload);
      // localStorage.setItem('shippingAdrress', JSON.stringify(action.payload));
      state.shippingAddress = action.payload;
}

For more info I can suggest to visit https://redux-toolkit.js.org/usage/immer-reducers#immer-usage-patterns

CodePudding user response：

Your code is working fine. I saw in redux devtools that shipping address is set to the values entered in the form after clicking submit. You should clarify more on what is it that is not working. If it's giving any kind of error, kindly share.