0

実現したいこと
Storeに格納したStateをさまざまなコンポーネントで使用できるようにしたい。

前提
ユーザーがログインすると、下記のようなデータが取得できます。

Json

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

これをDispatchを使い、Storeに格納し
さまざまなコンポーネントで使用できるようにしたいと考えています。

発生している問題・エラーメッセージ
DiscoverCondo.jsにて下記のようなエラーが出ます。
画像の説明をここに入力

Login.js

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

の部分では

コンソールに

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

の情報が確認できるので
情報が空ということことないと考えています。

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)

1 件の回答 1

1

下記のようにアップデートしたら上手くいきました!

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;

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。