

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

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

Json

[code]

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

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

発生している問題・エラーメッセージ  
DiscoverCondo.jsにて下記のようなエラーが出ます。  
[![画像の説明をここに入力](https://i.stack.imgur.com/bxyZD.png)](https://i.stack.imgur.com/bxyZD.png)

Login.js

[code]

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

の部分では

コンソールに

[code]

    "111.com", "222.com", "333.com",
    
[/code]

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

Login.js

[code]

    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;
    
[/code]

stores/mcu.js

[code]

        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;
    
[/code]

DiscoverCondo.js

[code]

      const url = useSelector(state => state.mcu.mcucondo);
      console.log(url)
    
[/code]


CC BY-SA 4.0
2023-02-21T07:29:32.373
93940
2023-02-21T09:59:06.737
57205
question
json reactjs redux
DispatchでStoreに変数を作り、その変数をさまざまなコンポーネントで使用できるようにしたい。


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

stores/index.js

[code]

    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;
    
[/code]


CC BY-SA 4.0
2023-02-21T09:59:06.737
93944
2023-02-21T09:59:06.737
57205
93940
answer