経緯
ReactとReduxを使って状態管理できるカウンターコンポーネントを作りました。
このコンポーネントを複製して、カウンターを2つ表示し、それぞれカウント値を別々に保持したいと思ったのですが、単純にjsxにカウンターコンポーネントのを2つ記載しただけでは、2つのカウンターの数値が同期してしまい(Storeから同じ値を参照していると思うので)ただカウンターが2つ表示されただけ、という状態になってしまいました。
単純にコンポーネントやreducerなどをコピーして別の名前で定義すればできるのはわかるのですが、コンポーネントのマークアップや、カウンターのロジックは全く同じなのに、ファイルが倍になっていくそのやりかたは絶対にベストでないことは自明なのですが、こういう場合の最適な処理がわからず困っています。
知りたいこと
今回の目的としては、それぞれの独立した値を持つカウンターを2つ表示したいのです。
このようなことをしたい場合は、コードのどの部分を変更(ないしは複製?)するのが最適なのでしょうか?
また、そもそもこう書いてるのおかしいよ。みたいな箇所があれば指摘いただけると幸いです。
コード
js
1// src/index.js 2 3import React from 'react'; 4import { render } from 'react-dom'; 5import { Provider } from 'react-redux'; 6import { createStore } from 'redux'; 7import CounterContainer from './containers/Counter'; 8import reducer from './reducers' 9 10const store = createStore(reducer); 11 12render( 13 <Provider store={store}> 14 <CounterContainer /> 15 {/* ここにもう一つカウンターを設置したい */} 16 </Provider>, 17 document.getElementById('root') 18);
js
1// src/components/Counter.js 2 3import React from 'react'; 4 5const Counter = ({ count, increment, decrement }) => { 6 return ( 7 <div> 8 <span>{count}</span> 9 <button onClick={increment}>+1</button> 10 <button onClick={decrement}>-1</button> 11 </div> 12 ); 13}; 14 15export default Counter
js
1 2// src/containers/Counter.js 3 4import Counter from '../components/Counter' 5import { onIncrement, onDecrement } from '../actions' 6import { connect } from 'react-redux'; 7 8const mapStateToProps = (state) => ({ 9 count: state.counterReducer.count 10}) 11 12const mapDispatchToProps = (dispatch) => ({ 13 increment: () => dispatch(onIncrement()), 14 decrement: () => dispatch(onDecrement()) 15}) 16 17export default connect(mapStateToProps, mapDispatchToProps)(Counter)
js
1// src/action.index.js 2 3export const INCREMENT = 'INCREMENT' 4export const DECREMENT = 'DECREMENT' 5 6export const onIncrement = () => { 7 return { 8 type: INCREMENT 9 } 10} 11 12export const onDecrement = () => { 13 return { 14 type: DECREMENT 15 } 16}
js
1 2// src/reducers/counter.js 3 4import { INCREMENT, DECREMENT } from '../actions' 5 6export const counterReducer = (state = {count: 0}, action) => { 7 switch (action.type) { 8 case INCREMENT: 9 return { 10 ...state, 11 count: state.count + 1 12 } 13 case DECREMENT: 14 return { 15 ...state, 16 count: state.count - 1 17 } 18 default: 19 return state 20 } 21} 22export default counterReducer
js
1// src/reducers/index.js 2 3import { combineReducers } from 'redux' 4import { counterReducer } from './counter' 5 6const reducer = combineReducers({ 7 counterReducer, 8}) 9 10export default reducer
回答1件
あなたの回答
tips
プレビュー