実現したいこと
Storeに格納したStateをさまざまなコンポーネントで使用できるようにしたい。
前提
ユーザーがログインすると、下記のようなデータが取得できます。
Json
1{ 2 "hubs": [ 3 "111.com", 4 "222.com", 5 "333.com", 6}
これをDispatchを使い、Storeに格納し
さまざまなコンポーネントで使用できるようにしたいと考えています。
発生している問題・エラーメッセージ
DiscoverCondo.jsにて下記のようなエラーが出ます。
Login.js
1 console.log(response.data.hubs[0]) 2 console.log(response.data.hubs[1]) 3 console.log(response.data.hubs[2])
の部分では
コンソールに
"111.com", "222.com", "333.com",
の情報が確認できるので
情報が空ということことないと考えています。
該当のソースコード
Login.js
1 2const Login = () => { 3 4 const history = useHistory(); 5 const dispatch = useDispatch(); 6 const [cookies, setCookie] = useCookies(); 7 const { register, handleSubmit, watch, errors } = useForm(); 8 9 const getJwt = async (data) =>{ 10 11 const email_encoded = btoa(data.email) 12 const password_encoded = btoa(data.password) 13 await axios.get('xxx.com', { 14 auth: { 15 username: data.email, 16 password: data.password, 17 } 18 }) 19 .then(function (response) { 20 console.log("logged in!"); 21 setCookie('accesstoken', response.data.token, { path: '/' }, { httpOnly: true }); 22 setCookie('refreshtoken', response.data.refresh_token, { path: '/' }, { httpOnly: true }); 23 console.log(response.data.hubs[0]) 24 console.log(response.data.hubs[1]) 25 console.log(response.data.hubs[2]) 26 dispatch(setMCUHouse(response.data.hubs[0])); 27 dispatch(setMCUCondo(response.data.hubs[1])); 28 dispatch(setMCUOffice(response.data.hubs[2])); 29 }) 30 .catch(err => { 31 console.log("miss"); 32 alert("Email or Password is wrong!"); 33 }); 34 }; 35 36 return ( 37 <> 38 <form onSubmit={handleSubmit(getJwt)}> 39 <input placeholder='Email Address' className='form-control login_form' {...register('email')} /> 40 <div className="login_password_section"> 41 <input placeholder='Password' className='form-control login_form' /> 42 <span 43 onClick={togglePassword} 44 role="presentation" 45 className="password_reveal" 46 > 47 </span> 48 </div> 49 </form> 50 51 </> 52 53 ); 54} 55export default Login;
stores/mcu.js
1import { createSlice } from "@reduxjs/toolkit"; 2 3const initialState = { 4 mcuhouse: '', 5 mcucondo: '', 6 mcuoffice: '', 7}; 8 9const slice = createSlice({ 10 name: "mcu", 11 initialState, 12 reducers: { 13 14 setMCUHouse: (state, action) => { 15 return Object.assign({}, state, { mcuhouse: action.payload }) 16 }, 17 setMCUCondo: (state, action) => { 18 return Object.assign({}, state, { mcucondo: action.payload }) 19 }, 20 setMCUOffice: (state, action) => { 21 return Object.assign({}, state, { mcuoffice: action.payload }) 22 }, 23 24 } 25}); 26 27export default slice.reducer; 28 29export const { setMCUHouse, setMCUCondo, setMCUOffice, } = slice.actions;
DiscoverCondo.js
1 const url = useSelector(state => state.mcu.mcucondo); 2 console.log(url)
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。