質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.83%
Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

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

Tomato_leaf
Tomato_leaf

総合スコア170

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0グッド

0クリップ

153閲覧

投稿2023/02/21 07:21

編集2023/02/21 07:22

実現したいこと

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

前提

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

Json

1{ 2 "hubs": [ 3 "111.com", 4 "222.com", 5 "333.com", 6}

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

発生している問題・エラーメッセージ

DiscoverCondo.jsにて下記のようなエラーが出ます。
イメージ説明

Login.js

の部分では

コンソールに

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

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

該当のソースコード

Login.js

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

0

自己解決

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

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;

投稿2023/02/21 09:56

Tomato_leaf

総合スコア170

下記のような回答は推奨されていません。

  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.83%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Redux

Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。