【React】ページ間での値の受け渡し【Redux】

Reactでページ間で値を受け渡したい時があると思います。
その時の記載方法を説明していきます。

今回はReduxを使用します。

また今回はVSCodeを使用してReactを使用するので、まだの方は以下を参考にして下さい。

Reduxをインストール
サンプル

Reduxをインストール

VSCodeでターミナルを開いて、以下のコマンドを叩いて下さい。

npm install --save redux
npm install --save react-redux

サンプル

また追記します。

import React, {Component}  from 'react';
import {BrowserRouter, Route, Link} from 'react-router-dom'
import './App.css';
import {createStore} from 'redux'

const App = () =>(
  <BrowserRouter>
    <div>
      <Route exact path='/' component={Home} />
      <Route path='/about' component={About} />
      <Route path='/blog/:id' component={Blog} />
      <Route path='/sum/:num1/:num2' component={Sum} />
    </div>
  </BrowserRouter>
)

const shoppingCart = (state=0, action) =>{
  switch (action.type) {
    case 'ADD':
      return state + 1
  
    default:
      return state
  }
}

let store = createStore(shoppingCart)

const Home = () =>{
  store.dispatch({type: 'ADD'})
  let x = store.getState().toString()
  return (
    <div>
      <h1>welcome</h1>
      <p>{x}</p>
      <p><Link to='/about'>About</Link></p>
    </div>
  )
}
const About = () =>{
  let x = store.getState().toString()
  return (
    <div>
      <h1>about</h1>
      <p>{x}</p>
    </div>
  )
}
export default App;

フリーランスを目指すなら【テックパートナーズカレッジ】

未経験者向けWEBスクール【SHElikes】