[Redux] Practice

Link

코드를 참고하여 처음부터 직접 만들어보는 것을 추천합니다.

반응형

Action

// action.js
// Action의 타입을 상수로 줘서 같은 타입명을 사용하지 못하도록 한다.
const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const SET_COUNT = 'SET_COUNT';
const CHANGE_NAME = 'CHANGE_NAME';

export const increase = () => {
    return { 
      type: INCREASE
    }
  }

export const decrease = () => {
    return { 
      type: DECREASE
    }
  }

export const setCounter = (number) => {
    return {
      type: SET_COUNT,
      payload: number
    }
  } 
  
export const changeName = (name) => {
    return {
      type: CHANGE_NAME,
      payload: {name}
    }
  }

---

Reducer

// counterReducer.js
const initialNum = 100;

export const counterReducer = (state = initialNum, action) => {
  if (action.type === 'INCREASE') {
    return state +1
  } else if (action.type === 'DECREASE') {
    return state -1
  } else if (action.type === 'SET_COUNT') {
    return action.payload
  } else {
    return state
  }
}

// greetingReducer.js
const initialName = '김코딩';

export const greetingReducer = (state = `안녕하세요, ${initialName}님!`, action) => {
  if (action.type === 'CHANGE_NAME'){
    return `안녕하세요, ${action.payload.name}님!`;
  } else {
    return state;
  }
}

// rootReducer.js
import { combineReducers } from "redux";
import { counterReducer } from "./counterReducer";
import { greetingReducer } from "./greetingReducer";

export const rootReducer = combineReducers({
    counterReducer, 
    greetingReducer
})

---

Store

// index.js
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { rootReducer } from './rootReducer';

const store = createStore(rootReducer)

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
      <App />
    </Provider>
);

---

App.js

// App.js
import { useSelector, useDispatch } from 'react-redux';
import { useRef } from 'react';
import { increase, decrease, setCounter, changeName } from './action';

export default function App() {
  const dispatch = useDispatch()
  
  const inputRef1 = useRef(null)
  const inputRef2 = useRef(null)

  const counter = useSelector((state) => {return state.counterReducer})
  const greeting = useSelector((state) => state.greetingReducer)
  return (
    <>
      <h1>{greeting}</h1>
      <div>
        <input ref={inputRef1}/>
        <button onClick={() => dispatch( changeName(inputRef1.current.value) )}>Change Name</button>
      </div>
      <h1>Count : {counter} </h1>
      <div>
        <button onClick={()=>dispatch(increase())}>+</button>
        <button onClick={()=>dispatch(decrease())}>-</button>
      </div>
      <div>
        <input ref={inputRef2}/>
        <button onClick={() => dispatch( setCounter(inputRef2.current.value) )}>Change Counter</button>
      </div>
    </>
  );
}

---

Result