You want Dispatch to create a variable in the Store so that it can be used by various components.

What do you want to do
You want the State stored in the Store to be available to a variety of components.

Prerequisite
When a user logs in, the following data can be retrieved:

Json

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

Use Dispatch to store it in the store
I would like to make it available to a variety of components.

Problem/error message you are experiencing
DiscoverCondo.js displays the following error:

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

in the section of

Console

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

because you can see the information in I don't think the information is empty.

const Login=()=>{

  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)
        wait axios.get('xxx.com',{
          auth: {
            username —data.email,
            password —data.password,
          }
          })
        .then(function(response){
          console.log("logged in!");
          setCookie('accessstoken', 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)}>
              <inputplaceholder='EmailAddress'className='form-control login_form' {...register('email')}/>
              <div className="login_password_section">
                <inputplaceholder='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:',
    };
    
    constslice = 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)

json reactjs redux

2023-02-21 08:15

1 Answers

I updated it as below and it worked!

stores/index.js

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

import mcuReducer from "./mcu";

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


constreducer=combineReducers({
  mcu —mcuReducer
});

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

export default store;

2023-02-21 09:01

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656