[Redux] Counter.jsx 7740_40

 

http://www.yes24.com/Product/Goods/78233628?scode=032&OzSrank=1

리액트를 다루는 기술

해당 책의 17번 예제를 부분 편집하여 정리한 카운터 코드입니다.

 

 

 

 

결과물:  

 

 

CounterComponent.jsx

 

import React from "react";
 
const CounterComponent = ({number, onIncrease, onDecrease}) => {
 
    return (<>
        <h1>숫자: {number}</h1>
        <br/>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
    </>)
}
export default CounterComponent

 

counter.reducer.js

 

import { createAction, handleActions } from "redux-actions";
 
const INCRESE = 'counter/INCREASE'
const DECRESE = 'counter/DECREASE'
 
export const increase = createAction(INCRESE)
export const decrease = createAction(DECRESE)
 
const initialState = {
    number: 0
}
const counterReducer = handleActions(
    {
        [INCRESE]: (state) => ({number: state.number + 1}),
        [DECRESE]: (state) => ({number: state.number - 1})
    },
    initialState
)
export default counterReducer
 
 

 

root.reducer.js

 

import { combineReducers } from 'redux'
 
import counterReducer from "../counter/counter.reducer";
const rootReducer = combineReducers({
 
    counterReducer
})
 
export default rootReducer

 

CounterContainer.jsx

 

import React, {useCallback} from "react";
import { useSelector , useDispatch } from 'react-redux'
import CounterComponent  from "./CounterComponent";
import { increase, decrease } from "./counter.reducer";
 
const CounterContainer = () => {
 
    const number = useSelector(state => state.counterReducer.number)
    const dispatch = useDispatch()
    const onIncrease = useCallback(()=> dispatch(increase()), [dispatch])
    const onDecrease = useCallback(()=> dispatch(decrease()), [dispatch])
    return (
        <CounterComponent number={number}
                          onIncrease={onIncrease}
                          onDecrease={onDecrease}
        />
    )
}
export default CounterContainer

 

App.jsx

 

import React from 'react';
import './App.css';
import '@fortawesome/fontawesome-free/css/all.min.css';
import 'bootstrap-css-only/css/bootstrap.min.css';
import 'mdbreact/dist/css/mdb.css';
import CounterContainer from "./counter/CounterContainer";
 
const App = () => <div className="App">
      <CounterContainer/>
    </div>
 
export default App;
 

 

index.js

 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { Provider} from 'react-redux'
import { createStore } from 'redux'
import * as serviceWorker from './serviceWorker';
import rootReducer from "./reducers";
 
ReactDOM.render(
  <Provider store={createStore(rootReducer)}>
    <App />
  </Provider>,
  document.getElementById('root')
);
 
serviceWorker.unregister();
 

 

import React, {useReducer} from 'react';
 
const counterTypes = {INCREASE: 'counter/INCREASE', DECREASE: 'counter/DECREASE'}
const counterIncrease = action => ({type: counterTypes.INCREASE, count: action.count + 1})
const counterDecrease = action => ({type: counterTypes.DECREASE, count: action.count - 1})
const counterReducer = (state, action) => {
    switch (action.type) {
        case counterTypes.INCREASE: return counterIncrease(action)
        case counterTypes.DECREASE: return counterDecrease(action)
        default: return state
    }
}
const Counter = () => {
    const [action, dispatch ] = useReducer(counterReducer, {count: 0})
    return <>
        <h1>{action.count}</h1>
        <div>
            <button onClick={()=> dispatch({type: counterTypes.INCREASE, count: action.count})}>+1</button>
            <button onClick={()=>dispatch({type: counterTypes.DECREASE, count: action.count})}>-1</button>
        </div>
    </>
}
 
export default Counter;