[React] Redux 간단 사용 코드 (클래스 컴포넌트)

파일의 경로는 변경해도 무관

 

1. 리덕스 파일(src/modules/counter.js) 생성 후 액션 타입 생성

const INCREMENT = 'counter/INCREMENT';

export const increment = () => ({ type: INCREMENT });

export default function counter(state = initialState, action){
    switch(action.type){
        case CHANGE_COLOR:
            return {
                ...state,
                color: action.color
            };
        case INCREMENT:
            return {
                ...state,
                number: state.number + 1,
            };
        case DECREMENT:
            return {
                ...state,
                number: state.number - 1,
            };
        default:
            return state;
    }
}

import { combineReducers, combineReduces } from 'redux';
import counter from './counter';
 
export default combineReducers({
    counter,
});

 

5. 스토어 생성(src/index.js) 및 <Provider> 적용

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux';
import rootReducer from './store/modules';
import { Provider } from 'react-redux';
 
const devTools = 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
const store = createStore(rootReducer, devTools);
console.log(store.getState());
 
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    
    document.getElementById('root')
);
registerServiceWorker();
 

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Palette from '../components/Palette';
import { changeColor } from '../store/modules/counter';
 
class PaletteContainer extends Component {
    
    handleSelect = color => {
        console.log('handleSelect props: ', this.props);
        console.log('color: ', color);
        const { changeColor } = this.props;
        changeColor(color);
    }
 
    render(){
        console.log('props: ', this.props);
        const { color } = this.props;
        return <Palette onSelect={this.handleSelect} selected={color}/>;
    }
}
 
 
// 컴포넌트에 내려줄 스토어의 state값을 정의
const mapStateToProps = state => (
    console.log('mapStateToProps'),
    console.log('state: ', state),
    {
    color: state.counter.color,
});
 
// 액션을 디스패치하는 함수를 만들어서 props로 넣어줍니다.
const mapDispatchToProps = dispatch => (
    console.log('mapDispatchToProps'),
    console.log('dispatch: ', dispatch),
    {
    changeColor: color => dispatch(changeColor(color)),
});
 
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(PaletteContainer);

 

7. App.js에 컨테이너 컴포넌트로 변경

import React, { Component } from 'react';
 
import './App.css';
import Counter from './components/Counter';
import Palette from './components/Palette';
import WaitingList from './components/WaitingList';
import PaletteContainer from './containers/PaletteContainer';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <PaletteContainer selected="red" />
        <Counter value={0} color="red" />
        <WaitingList />
      </div>
    );
  }
}
 
export default App;
 

import React from 'react';
import './Palette.css';
 
const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
 
const PaletteItem = ({ color, active, onClick }) => {
  return (
    <div
      className={`PaletteItem ${active ? 'active' : ''}`}
      style={{ backgroundColor: color }}
      onClick={onClick}
    />
  );
};
 
const Palette = ({ selected, onSelect }) => {
  return (
    <div className="Palette">
      <h2>색깔을 골라골라</h2>
      <div className="colors">
        {colors.map(color => (
          <PaletteItem 
            color={color} 
            key={color} 
            active={selected === color}
            onClick={() => onSelect(color)} />
        ))}
      </div>
    </div>
  );
};
 
export default Palette;