Search code examples
javascriptreactjsreduxmaterial-ui

How to change state with MUI Texfield & Redux


I have an input field where I am trying to pass some information before moving onto a separate page. My problem is the Redux state is not changing, but the console is showing the value is being passed correctly. I'm assuming something is wrong with my Slice but I believe I am passing the payload correctly. My Redux slice looks like:

import { createSlice } from "@reduxjs/toolkit";

export const walletSlice = createSlice({
  name: "wallet",
  initialState: {
    wallet: "xxx-xxxx-xxx-xxxx",
  },
  reducers: {
    setWalletAddress: (state, action) => {
      state.value = action.payload;
    },
  },
});

export const { setWalletAddress } = walletSlice.actions;

export default walletSlice.reducer;

While my from component looks like:

import { setWalletAddress } from "../../redux/wallet";
import { useDispatch } from "react-redux";

export default function AddressForm() {
return (
  const dispatch = useDispatch();
  const handleChangeWallet = (event) => {
    dispatch(setWalletAddress (event.target.value));
    console.log(event.target.value);
  };
    <React.Fragment>
          <TextField
            onChange={handleChangeWallet}
            label="Wallet address"
          />
    </React.Fragment>
  );
}

My store looks pretty standard:

export default configureStore({
  reducer: {
    wallet: walletReducer,
  },
});

Solution

  • I assume that you need to use correct state field name in the reducer function. I guess following code line makes an issue,

    state.value = action.payload;
    

    Instead of this, you need to write correct field name wallet not value

    state.wallet = action.payload;