Help us understand the problem. What is going on with this article?

React Reduxでコンポーネント間の値共有を行う場合のメモ

概要

新年早々にReact Reduxを試してみたいと思い立ち、いろいろ調べる中でふとコンポーネント間の値共有ってどうやるんだろうと思って作ってみたサンプルのメモです。なお、React Reduxの仕組み等々については@erukitiさんの記事React+Redux入門や書籍 React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上までを参考にするとよいと思います。

例題

下記のようにテキストボックスに入力するコンポーネント、入力した内容を表示するコンポーネントで分けたときに値の共有を行うサンプルを記載します。
image.png

サンプルソース

index.js

InputAppが入力部分、ViewAppが表示部分になります。

index.js
import React from 'react';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import {render} from 'react-dom';
import inputReducer from './reducers/input';
import InputApp from './containers/InputApp';
import ViewApp from './containers/ViewApp';

const store = createStore(inputReducer);

render( 
  <Provider store ={store}>
    <InputApp />
    <ViewApp />
  </Provider >,
  document.getElementById('root')
);

containers

InputApp.js
import {connect} from 'react-redux';
import InputApp from '../components/InputApp';
import {inputName} from '../actions/input';

function mapStateToProps({name}) {
  return {name};
}

function mapDispatchToProps(dispatch) {
  return {
    inputName(name) { dispatch(inputName(name)); }
  };
}

export default connect(mapStateToProps, mapDispatchToProps)(InputApp);

ViewApp.js
import {connect} from 'react-redux';
import ViewApp from '../components/ViewApp';

function mapStateToProps({name}) {
  return {name};
}

export default connect(mapStateToProps)(ViewApp);

components

InputApp.js
import React from 'react';

export default function InputApp({name, inputName}){
  return (
   <div>
    【名前】
       <input type ="text" onChange = {(e) => inputName(e.target.value)} />
   </div>
  );
}

ViewApp.js
import React from 'react';

export default function ViewApp({name}){
  return (
    <div>
    【名前】{name}
    </div>
  );
}

actions

input.js
export const inputName = (name) => (
  { type: 'INPUT_NAME', payload: {name} }
);

reducers

input.js
const initialState = { name: ''};

export default function inputReducer(state = initialState, action) {
  switch (action.type) {
    case 'INPUT_NAME':
     return { ...state, name: action.payload.name};
    default:
     return state;
  }
}
Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away