Question 73942 in Reactjs Question posted in
The new location for the React Documentation can be found here.

How to dispatch response data from api in react redux? – Reactjs

when the user logs in I can get the following Json data.

Json

{
    "hubs": [
        "111.com",
        "222.com",
        "333.com",
}

The section of code below

  console.log(response.data.hubs[0])
  console.log(response.data.hubs[1])
  console.log(response.data.hubs[2])

I can see the URL like

"111.com", "222.com", "333.com",

in console.

However, I use dispatch, stores and useSelector, I got the error like this.
enter image description here

I don’t know why I got the error.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Login.js

const Login = () => {

  const history = useHistory();
  const dispatch = useDispatch();
  const [cookies, setCookie] = useCookies();
  const { register, handleSubmit, watch, errors } = useForm();

  const getJwt = async (data) =>{

        const email_encoded = btoa(data.email)
        const password_encoded = btoa(data.password)
        await axios.get('xxx.com', {
          auth: {
            username: data.email,
            password: data.password,
          }
          })
        .then(function (response) {
          console.log("logged in!");
          setCookie('accesstoken', response.data.token, { path: '/' }, { httpOnly: true });
          setCookie('refreshtoken', response.data.refresh_token, { path: '/' }, { httpOnly: true });
          console.log(response.data.hubs[0])
          console.log(response.data.hubs[1])
          console.log(response.data.hubs[2])
          dispatch(setMCUHouse(response.data.hubs[0]));
          dispatch(setMCUCondo(response.data.hubs[1]));
          dispatch(setMCUOffice(response.data.hubs[2]));
        })
        .catch(err => {
            console.log("miss");
            alert("Email or Password is wrong!");
        });
      };

  return (
    <>
            <form onSubmit={handleSubmit(getJwt)}>
              <input placeholder='Email Address' className='form-control login_form' {...register('email')} />
              <div className="login_password_section">
                <input placeholder='Password' className='form-control login_form'  />
                <span
                    onClick={togglePassword}
                    role="presentation"
                    className="password_reveal"
                    >
                </span>
              </div>
            </form>

    </>

  );
}
export default Login;

stores/mcu.js

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

const initialState = {
  mcuhouse: '',
  mcucondo: '',
  mcuoffice: '',
};

const slice = createSlice({
  name: "mcu",
  initialState,
  reducers: {

    setMCUHouse: (state, action) => {
      return Object.assign({}, state, { mcuhouse: action.payload })
    },
    setMCUCondo: (state, action) => {
      return Object.assign({}, state, { mcucondo: action.payload })
    },
    setMCUOffice: (state, action) => {
      return Object.assign({}, state, { mcuoffice: action.payload })
    },

  }
});

export default slice.reducer;

export const { setMCUHouse, setMCUCondo, setMCUOffice,  } = slice.actions;

DiscoverCondo.js

  const url = useSelector(state => state.mcu.mcucondo);
  console.log(url)
Tags:

2

Answers


  1. 0

    According to RTK document,

    you should set configureStore() like this.

    app/store.js

    import { configureStore } from '@reduxjs/toolkit';
import mcuReducer from '...';
export const store = configureStore({
  reducer: {
    mcu: mcuReducer,
  },
});
// ...
    Login or Signup to reply.
  2. 0

    I forget to update stores/index.js

    I edit like this then go through

    stores/index.js

    import { combineReducers } from "redux";
import { configureStore } from "@reduxjs/toolkit";

import mcuReducer from "./mcu";

import { save, load } from "redux-localstorage-simple"


const reducer = combineReducers({
  mcu:mcuReducer
});

const store = configureStore(
  { reducer,
    preloadedState: load(),
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(save()), },
  );

export default store;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search