常連

### 前提・実現したいこと
現在ポートフォリオ作成のための勉強しており、React.jsでReduxを導入してボタンをクリックするとステートが変更されるコードを記述しております。
参考書を見ながら記述しており、ブラウザ上で表示する際に以下のエラーが起きました。

### 発生している問題・エラーメッセージ

```
Failed to compile.

src/App.js
  Line 36:3:  'style' is not defined  no-undef
  Line 55:3:  'style' is not defined  no-undef

Search for the keywords to learn more about each error.
```

### 該当のソースコード

```JavaScript
import React,{ Component } from 'react';
import './App.css';
import { connect } from 'react-redux';

function mappingState(state){
  return state;
}

class App extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div>
        <h1>Redux</h1>
        <Message />
        <Button />
      </div>
    );
  }
}
App = connect()(App);

class Message extends Component{
  style = { 
    fontSize:"20pt",
    padding:"20px 5px"
  }
  render(){
    return(
      <p style={this.style}>
        {this.props.message}: {this.props.counter}
      </p>
    );
  }
}
Message = connect(mappingState)(Message);
  

class Button extends Component{
    style = {
    fontSize:"16pt",
    padding:"5px 10px"
  }
  constructor(props){
    super(props);
    this.doAction = this.doAction.bind(this);
  }
  doAction(e){
    if (e.shiftKey){
      this.props.dispatch({type:'DECREMENT'});
    }else{
      this.props.dispatch({type:'INCREMENT'});
    }
  }
  render(){
    return(
      <button style={this.style} onClick={this.action}>click</button>
    )
  }
}
Button = connect()(Button);

export default App;
```

### 試したこと

- Reduxを導入する前までは、コンポーネントクラスにcss情報をオブジェクトにしてJSXにstyleを反映させることはできていたので、プロジェクトを作り直して再度Reduxを導入。
　→同じエラー
- スペルミスかと思い参考書の配布用ソースコードで、VSコードのCompare Active File with Clipbordで検証後、各所スペースの有無が見られたため、配布用ソースコードからindex.jsとApp.jsに対してコードをコピペして実行。
　→同じエラー
- 参考書で使用しているNode.js/Reduxのバージョンが現在のバージョン仕様が大きく異なり記述規則が違うのかと思い、バージョンによる変更内容を調べる。
参考書:node-10.14.0 redux-4.0.1 _ 自分:node-14.15.4 redux-4.0.5
　→仕様変更を見つけられず。

### 補足情報（FW/ツールのバージョンなど）
- node-14.15.4 
- redux-4.0.5 
- macOSを使用
##### Reduxを導入する際に用いたコマンド
- npm install --save redux
- npm install --save react-redux

Reactを用いたクリックに合わせて表示を変える機能のプログラムで、'is not defined  no-undef'のエラーを解決したい。

### 実現したいこと

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

### 前提

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

```Json
{
    "hubs": [
        "111.com",
        "222.com",
        "333.com",
}
```
これをDispatchを使い、Storeに格納し
さまざまなコンポーネントで使用できるようにしたいと考えています。


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

DiscoverCondo.jsにて下記のようなエラーが出ます。
![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-21/d70ab26e-bf6a-48f0-ac02-031bcf844160.png)


```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)
```




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

```ターミナル
yarn run v1.16.0
error Couldn't find a package.json file in "/Users/○○○/○○○"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```
先程まで何事もなく稼働していたのですが旧にサーバーが起動しなくなりました。
起動していたブランチに戻ってyarn startをするとサーバーは立ち上がりますが、新しく作ったブランチでサーバーが起動しないという状態です。
調べても原因がわからなかったので質問させて頂きました。
初心者で申し訳ありませんが、宜しくお願い致します。

error Couldn't find a package.json file inについて

#### 聞きたいこと
React/Reduxを使用してWebアプリを作成しているのですが、<Link>コンポーネントを使用するとタイトルに記載されているエラーが発生してしまいます。
React/Reduxの情報をWebで様々確認してみましたが、情報がすでに過去のものになってしまっている（npmパッケージ等が古くなっている等）などがあり、どうにもわからない状態です。
そこで下記2点質問があります。
* 今回のエラーに対しての対処方法に関して
* React/Reduxのキャッチアップ方法はみなさんどうしているのか

をよければお聞きしたいです。
エラーに関しては下記にコードを載せます。もし情報が不足していましたら補足させていただきますので、よろしくお願いいたします。

#### コード
* Component
```JavaScript
import React, { Component } from 'react';
import { connect } from 'react-redux';
import _ from 'lodash';
import {
  BrowserRouter,
  Route,
  Switch,
  Link,
} from 'react-router-dom';

import { readLanguages, readRepositories } from '../actions';

class LanguagesIndex extends Component {
  componentDidMount() {
    this.props.readLanguages()
  }

  readRepositories(event, id) {
    event.preventDefault();
    this.props.readRepositories(id)
  }

  renderLanguages() {
    return _.map(this.props.languages, language => (
      <React.Fragment key={language.id}>
        |<Link to={`/languages/${language.id}`} onClick={(event) => this.readRepositories(event, language.id)}>{language.name}</Link>
      </React.Fragment>
    ))
  }

  render() {

    return (
      <React.Fragment>
        <table className="header-table">
          <tbody>
            <tr>
              <td>
                <img src="favicon.ico" alt="This describes OSS"/>
                <b className="hnname">
                  <a href="">OSS Project List</a>
                </b>
              </td>
              <td className="languages">
                {this.renderLanguages()}|
              </td>
            </tr>
          </tbody>
        </table>
      </React.Fragment>
    )
  }
}

const mapStateToProps = state => ({ languages: state.languages })
const mapDispatchToProps = ({ readLanguages, readRepositories })

export default connect(mapStateToProps, mapDispatchToProps)(LanguagesIndex)
```
* index.js
```JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

import './index.css';
import reducer from './reducers';

import RepositoriesIndex from './components/repositories_index';
import LanguagesIndex from './components/languages_index';
import registerServiceWorker from './registerServiceWorker';

const store = createStore(reducer, applyMiddleware(thunk))

ReactDOM.render(
  <Provider store={store}>
    <React.Fragment>
      <LanguagesIndex />
      <BrowserRouter>
        <Switch>
          <Route exact path="/" component={RepositoriesIndex} />
          <Route path="/languages/:id" component={RepositoriesIndex} />
        </Switch>
      </BrowserRouter>
    </React.Fragment>
  </Provider>,
  document.getElementById('root'));
registerServiceWorker();
```

[React] Linkコンポーネントを使用すると「You should not use <Link> outside a <Router>」といったエラーが表示される

### 前提・実現したいこと

React+ReduxでSPAアプリケーションを開発中です。
ページのリロード（f5キー）時に状態が初期化されるのを防ぎたいのですが、中々いい案が思い浮かびません。
イメージ的にはリロードがされた時に発火するような処理を作りたいです。
どなたかご教授お願いいたします。

React+Reduxでリロード時も状態維持

### 解決したいこと
ReactコンポーネントのonClick属性に**メソッド**を入れた場合と**アロー関数**を入れた場合の違いを理解したい。

### きっかけとなったエラー
```js
class Prev extends Component {
  prev={
    position:"absolute",
    top:"50%",
    left:"25%",
    width:"50px",
    height:"50px",
    fontSize:"30px",
    cursor:"pointer",
  }
  
  prev() {
    return this.props.dispatch({type:'PREV'});
  }
  
  render() {
    return (
      <button style={this.prev} onClick={this.prev}>&lt;</button>...①
      <button style={this.prev} onClick={()=>this.props.dispatch({type:'PREV'})}>&lt;</button>...②
    );
  }
}

export default connect((state)=>state)(Prev);
```
**①**の場合では
Uncaught Error: Expected `onClick` listener to be a function, instead got a value of `object` type.というエラーになってしまうが、
**②**の場合では
特にエラーはなくちゃんと動作しました。

### 自分考え
①の場合もオブジェクトを返していると思うのでエラー文の意味がわからなかった。

### どなたかわかる方いたらアドバイスしてくれると助かります。

ReactコンポーネントのonClick属性について

React,Reduxを使用しアプリの制作を行っており、useCallbackとuseEffectで似たようなエラーが六つほど出ている状態です。

useCallback
```React
React Hook useCallback has a missing dependency: 'dispatch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
```

useEffect
```React
React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
```

実際に警告が出ているコード
```React
const backToHome = useCallback(() => {
        dispatch(push('/'))
    },[]);
```

React,Reduxの学習動画を写しているだけなので、コード自体に間違いはないと思います。
どなたか解決法をご存知の方お教えいただきたいです。よろしくお願いします。

useCallbackとuseEffectの警告をなくす

現在Reduxを使い、state管理を行なっています。
とあるactionでstateを全て変更しようとした際にactionは走るのですが、state側に変更がかからず困っています。
下記に失敗例と成功例載せておきます。

自分なりに考えたのは、state全体を変更するのはobjectを渡しているので、参照渡しとして認識され変更がかからないのかな？と思っています。
Reduxを触って日が浅いので、ご教授お願いします。


**失敗例**
```index.js
import { createSlice } from "@reduxjs/toolkit";
import { areaState } from "../initialState/areaState";

const initialState = {
    hoge: 1,
    fuga: "テスト"
  },

export const applicationModule = createSlice({
  // 一意の名前
  name: "APP",
  initialState,
  // 操作の内容
  reducers: {
    set(state, action) {
      state = action.payload;
    },
  },
});

export const { set } = applicationModule.actions;

```

```jsx
import { useDispatch, useSelector } from "react-redux";
import { setAreaInfo } from "../../store/application";
import { areaState } from "../../store/initialState/areaState";

export const Test = () => {
  const data = {
    hoge: 2,
    fuga: "本番"
  }
  const dispatch = useDispatch();
  const { hoge } = useSelector((state) => state.application);
  const set = () => {
    dispatch(set(data));
  };
  return (
<div>
    <button onClick={set}></button>
    <div>{hoge}</div>
</div>
  );
};

```
_______________________________________________________

**成功例**
```js
import { createSlice } from "@reduxjs/toolkit";
import { areaState } from "../initialState/areaState";

const initialState = {
    hoge: 1,
    fuga: "テスト"
  },

export const applicationModule = createSlice({
  // 一意の名前
  name: "APP",
  initialState,
  // 操作の内容
  reducers: {
    setHoge(state, action) {
      state.hoge = action.payload;
    },
  },
});

export const { setHoge } = applicationModule.actions;

```

```jsx
import { useDispatch, useSelector } from "react-redux";
import { setAreaInfo } from "../../store/application";
import { areaState } from "../../store/initialState/areaState";

export const Japan = () => {
  const dispatch = useDispatch();
  const { hoge } = useSelector((state) => state.application);
  const set = () => {
    dispatch(setHoge(4));
  };
  return (
<div>
    <button onClick={set}></button>
    <div>{hoge}</div>
</div>
  );
};

```

