17.2 리덕스사용하여 리액트어플리케이션 상태관리

//index.js
import App from './App';
//react application에 리덕스 적용하기 : createStore사용하기
//rootReducer도 불러와준다
//사용시 Provider 컴퍼넌트로 감싸주어야함
import {createStore} from 'redux';
import rootReducer from './modules';
import {Provider} from 'react-redux'
import { composeWithDevTools } from 'redux-devtools-extension';

//redux devtools 크롬확장 프로그램 설치후, redux-devtools-extension 패키지 설치 + 해당 명령어 작성하면
//npm start 했을때 redux 개발자도구 나옴
const store = createStore(rootReducer,composeWithDevTools());

ReactDOM.render(
  <Provider store= {store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);

//App.js
import React from "react";
import CounterContainer from "./components/CounterContainer";
import Todos from "./components/Todos";
function App() {
  return (
    <div className="App">
      <CounterContainer />
      <hr />
      <Todos />
    </div>
  );
}

export default App;

//modules/counter.js
//액션타입정하기
const INCREASE = 'counter/INCREASE';
const DECREASE = "conter/DECREASE";

//액션생성함수만들기
export const increase = () =>({type:INCREASE})
export const decrease = () =>({type:DECREASE})

//counter.js 의 초기상태만들기
const initialState = {
  number : 0
};

//리듀서 : 현재 상태를 참조하여 새로운 객체를 생성해서 반환
//액션함수는 여러개의 export 갸능, 리듀서함수는 하나의 export default 가능
function counter(state = initialState, action){
  switch(action.type){
    case INCREASE:
      return {
        number:state.number +1
      };
    case DECREASE:
      return{
        number:state.number -1
      };
    default:
      return state;
  }
}
export default counter;

//modules/todos.js
//루트리듀서만들기
//createStore함수로 스토어를 만들때는 리듀서 하나만 필요하므로 합쳐주어야 한다.
//이 작업은 combineReducers라는 유틸 함수를 사용하면 쉽게처리할 수 있다.

import {combineReducers} from 'redux';
import counter from './counter';
import todos from './todos';

const rootReducer = combineReducers({
  counter,
  todos
})
export default rootReducer;

//나중에 이 파일을 불러올때는 
//import rootReducer from './modules';

//components/counter.js
import React from 'react'

const Counter = ({number,onIncrease,onDecrease}) => {
  return (
    <div>
      <h1>{number}</h1>
      <button onClick  = {onIncrease}> + </button>
      <button onClick  = {onDecrease}> - </button>
    </div>
  )
}

export default Counter

//countercontainer.js
import React from 'react'

const Counter = ({number,onIncrease,onDecrease}) => {
  return (
    <div>
      <h1>{number}</h1>
      <button onClick  = {onIncrease}> + </button>
      <button onClick  = {onDecrease}> - </button>
    </div>
  )
}

export default Counter

//components/todos.js
import React from 'react';

const TodoItem = ({todo,onRemove,onToggle})=>{
  return(
    <div>
      <input type="checbox"></input>
      <span>예제텍스트</span>
      <button>삭제</button>
    </div>
  )
};

const Todos = ({input,todos,onChangeInput,onInsert,onToggle,onRemove}) => {
  const onSubmit = e =>{e.preventDefault()};
 
  return (
    <div >
      <form onSubmit = {onSubmit}>
        <input />
        <button type="submit">등록</button>
      </form>
      <div>
        <TodoItem />
        <TodoItem />
        <TodoItem />
        <TodoItem />
      </div>
    </div>
  )
}

export default Todos