export const typeName = (param) =>({
    type: TYPE_NAME,
    actionData,
})

function reducer(state = initState, action){
    switch(action.type){
        case TYPENAME:
            return {
                ...state,
                data: state.data + 1,
            }
        case TYPENAME:
            return {
                ...state,
            }
        default:
            return state;
    }
}

function reducer(state = initState, action){
    switch(action.type){
        case TYPENAME:
            return state.concat(action.data)
        case TYPENAME:
            return state.map(
                (data)=>data.id === action.id
                ? console.log("data.id와 action.id는 같다");
                : console.log("data.id와 action.id가 다르다");
                            )
        default:
            return state;
    }
}

import { combineReducers } from "redux"
import moduleA from "./moduleA";
import moduleB from "./moduleB";
//Root Reducer생성
const rootReducer = combineReducers({
  moduleA,
  moduleB,
});

ReactDOM.render(
  //<APP />를 아래와 같이 Provider러 감싼뒤 store를 지정해주면 페이지 어디서나 store를 사용할 수 있다.
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

import React from "react";
function Counter({ number, diff, onIncrease, onDecrease, onSetDiff }) {
  const onChange = (e) => {
    onSetDiff(parseInt(e.target.value), 10);
  };
  return (
    <div>
      <h1>{number}</h1>
      <div>
        <input type="number" value={diff} onChange={onChange} />
        <button onClick={onIncrease}>+</button>
        <button onClick={onDecrease}>-</button>
      </div>
    </div>
  );
}

export default Counter;

import React from "react";
import Counter from "../components/Counter";
//상태를 조회하기위한 useSelector   dispatch를 위함
import { useSelector, useDispatch } from "react-redux";
//액션 생성함수를 불러와서 디스패치함
import { increase, decrease, setDiff } from "../modules/counter";

function CounterContainer() {
  //useSelector를이용해서 해당 state의 값들을 객체향태로 얻어 낸뒤 비구조 할당으로 값을 바로 조회가능하도록만듬
  const { number, diff } = useSelector((state) => ({
    number: state.counter.number,
    diff: state.counter.diff,
  }));
  const dispatch = useDispatch();

  //미리 만들어 놓은 액션생성 함수를 이용하여 디스패치
  // 호출되면 액션 객체가 만들어진다.
  const onIncrease = () => dispatch(increase());
  const onDecrease = () => dispatch(decrease());
  const onSetDiff = (diff) => dispatch(setDiff(diff));

  //이제 위에서 작업한 내용들을 Conter에 하나하나 잔달하면된다.
  return (
    <Counter
      number={number}
      diff={diff}
      onIncrease={onIncrease}
      onDecrease={onDecrease}
      onSetDiff={onSetDiff}
    />
  );
}

export default CounterContainer;

import React from "react";
import CounterContainer from "./containers/CounterContainer";

function App() {
  return <CounterContainer />;
}

export default App;

import React, { useState } from "react";

//Todo를 보여주는 컴포넌트
const TodoItem = React.memo(function TodoItem({ todo, onToggle }) {
  return (
    <li
      style={{
        textDecoration: todo.done ? "line-through" : "none",
      }}
      onClick={() => onToggle(todo.id)}
    >
      {todo.text}
    </li>
  );
});

//Todo들의 리스트를 보여주는 컴포넌트
const TodoList = React.memo(function TodoList({ todos, onToggle }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} onToggle={onToggle} />
      ))}
    </ul>
  );
});

//새로운 todo를 생성하기 위한 컴포넌트
function Todos({ todos, onCreate, onToggle }) {
  //모든 상태정본를 리덕스에서 관리하는 것은 아님
  //필요에 따라 컴포넌트 내부에서 useState로 사용가능
  const [text, setText] = useState("");
  const onChange = (e) => setText(e.target.value);
  const onSubmit = (e) => {
    //default로 새로고침이되는데 이것을 적으면 새로고침이 되지 않는다.
    e.preventDefault();
    //새로고침을 안하는대신 받아온 props로 onCreate을 호출하여 렌더링
    onCreate(text);
    //onCreate함수 호출이후에는 다시 text를 초기화해준다.
    setText("");
  };
  return (
    <div>
      <form onSubmit={onSubmit}>
        <input value={text} onChange={onChange} placeholder="할일적기" />
        <button type="submit">등록</button>
      </form>
      <TodoList todos={todos} onToggle={onToggle} />
    </div>
  );
}

//Todos를 내보내준다
export default React.memo(Todos);

//함수들을 매벙 렌더랑될 때마다 생성하는것이 아닌 자새용을 위한 useCallback
import React, { useCallback } from "react";
import Todos from "../components/Todos";
import { useSelector, useDispatch } from "react-redux";
import { addTodo, toggleTodo } from "../modules/todos";
function TodoContainer() {
  //저번에 한것과 비슷하게 todos를 할당받고 dispatch를 만들어줌
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  //아래와 같은 문법을 사용하여 useCallBack을 사용한다
  const onCreate = useCallback(
    (text) => {
      if (text === "") {
        alert("값을 입력하세요");
      } else {
        dispatch(addTodo(text));
      }
    },
    [dispatch]
  );
  //   const onToggle = (id) => dispatch(toggleTodo(id));
  const onToggle = useCallback((id) => dispatch(toggleTodo(id)), [dispatch]);

  return <Todos todos={todos} onCreate={onCreate} onToggle={onToggle} />;
}

export default TodoContainer;

import React from "react";
import CounterContainer from "./containers/CounterContainer";
import Todos from "./containers/TodoContainer";
function App() {
  return (
    <div>
      <CounterContainer />
      <hr />
      <Todos />
    </div>
  );
}

export default App;