アロー関数でどうやったら実装できますか

Question

前提・実現したいこと

このreduxの書き方をアロー関数を使った書き方にしていただきたいです

該当のソースコード

import React from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, connect } from 'react-redux'

//Presentational Components
class AppComponents extends React.Component {

  send(e){
    this.props.onClick(this.refs.inputText.value);
  }


  render() {
    return (
      <div>
        <input type="text" defaultValue="" ref="inputText" /> { /* 入力フォーム */ }
        <button onClick={this.send.bind(this)}>計算</button>  { /* ボタン */ }
        <br />
        {this.props.price}  { /* 表示させる税込の金額 */ }
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    price: state.price
  };
}

function mapDispatchToProps(dispatch) {
  return {
    onClick(price){
      dispatch(addTax(price));
    }
  };
}

let AppContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(AppComponents);



// ActionCreator
const ADDTAX = 'ADDTAX';
function addTax(price) {
  return {
    type: ADDTAX,
    price
  };
}


// Reducer
function appReducer(state, action) {
  switch (action.type) {
    case 'ADDTAX':
      return (
        Object.assign({}, state, {price: action.price * 1.08})
      );
    default:
      return state
  }
}


//state初期化
const initialState = {
  price: ''
};

//store作成
const store = createStore(appReducer, initialState);

//レンダリング
ReactDOM.render(
  <Provider store={store}>
    <AppContainer />
  </Provider>,
  document.getElementById('root')
);

Comments

[m.ts10806]

回答依頼いただきましたが、Reactは経験なしなのでご期待には添えません。

[m.ts10806]

ただ、「していただきたい」は質問ではなく作業依頼です。まず思ったようにやってみては。

[rl0t_ryunosuke]

申し訳ございません
ご指摘いただきありがとうございます

Answer 1

こんな感じでしょうか。

• mapStateToProps と mapDispatchToProps はそれぞれ useSelector と useDispatch で書き換えました。
• AppContainer も不要になりますので、ReactDOM.render では <App /> をお使いください。
• ref は useRef してもいいのですが、useState を使って 制御されたコンポーネント にするのが一般的でしょう。

import React, { useState } from 'react'
import ReactDOM from 'react-dom'
import { createStore } from 'redux'
import { Provider, useDispatch, useSelector } from 'react-redux'

// Presentational Components
function App() {
  const [inputText, setInputText] = useState('');
  const price = useSelector(state => state.price);
  const dispatch = useDispatch();

  return (
    <div>
      <input type="text" value={inputText} onChange={e => setInputText(e.target.value)} /> { /* 入力フォーム */ }
      <button onClick={e => dispatch(addTax(inputText))}>計算</button>  { /* ボタン */ }
      <br />
      {price}  { /* 表示させる税込の金額 */ }
    </div>
  );
};

// 以下略

Comments

[rl0t_ryunosuke]

返信遅くなり申し訳ございません。
こちら、参考にして書かせていただいたのですが、
const price = useSelector((state) => state.price);
こちらで
could not find react-redux context value; please ensure the component is wrapped in a <Provider>
というエラーが出ていて進めません
調べてみたのですが解消しなかったのでご教授いただきたいです。
よろしくお願いいたします

[hoshi-takanori]

えっと、最後のところで <App /> を <Provider store={store}> 〜 </Provider> で囲んでますか？

//レンダリング
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);

[rl0t_ryunosuke]

ありがとうございます！
解決致しました