payload

여태까진 +1, -1을 하는 기능을 만들었습니다. 그런데 1로 숫자가 정해진 것이 아니라 원하는 숫자만큼을 더하거나 빼는 기능을 만드려면 어떻게 해야할까요?

 

우리가 이전까지 만든 기능은 리듀서에게 더해 라고만 말을 했을뿐입니다. 1이라는 임의적 숫자를 더해서 리듀서에게 액션객체를 보냈죠.

 

하지만 이제 N을 더해 라고 N을 같이 리듀서에서 보내야합니다. 지금까지는 ~을 이라는 목적어가 없었다면, 이제 그 목적어가 생긴것이고 목적어도 액션객체에 담아 같이 보내줘야 할 것입니다.

이렇게 액션객체에 담아 보내주는 그 것을 우리는 payload라고 합니다. 만약 10을 더해라는 것을 리듀서에게 보내고 싶으면 액션객체에 payload를 같이 담아주는 것입니다.

 

payload를 이용해서 기능 구현 작업순서

1. 사용자가 입력한 값을 받을 input 구현하기
2. Action Creator 작성하기
3. 리듀서 작성하기
4. 구현된 기능 테스트 하기

// src/redux/modules/counter.js

// Action Value

// Action Creator

// Initial State

// Reducer

// export default reducer

모듈작성 초안, 모듈을 만들 때 빈 페이지에 리스트업을 하고 시작하는것이 좋다. 구성요소를 빼먹지 않을 수 있음

 

최종 코드는 밑에 적어두었음

// src/App.js
import React from 'react';
import { useState } from 'react';
import { useSelector } from 'react-redux';
import { useDispatch } from 'react-redux';
import { addNumber, deleteNumber } from './redux/modules/counter';

const App = () => {
  const [number, setNumber] = useState(0);
  const globalNumber = useSelector((state) => state.counter.number);
  const dispatch = useDispatch();

  const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);
  };
  const onClickAddNumberHandler = () => {
    dispatch(addNumber(number));
  };
  const onClickDeleteNumberHandler = () => {
    dispatch(deleteNumber(number));
  };
  return (
    <div>
      {globalNumber}
      <input type="number" onChange={onChangeHandler} />
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button onClick={onClickDeleteNumberHandler}>빼기</button>
    </div>
  );
};

export default App;

// src/redux/modules/counter.js

// Action Value
const ADD_NUMBER = 'ADD_NUMBER';
const DELETE_NUMBER = 'DELETE_NUMBER';
// Action Creator
export const addNumber = (payload) => {
  return {
    type: ADD_NUMBER,
    payload,
    // payload:payload ES6에서는 키와 밸류가 같으면 밸류값만 써도됨
  };
};
export const deleteNumber = (payload) => {
  return {
    type: DELETE_NUMBER,
    payload,
  };
};
// Initial State
const initialState = {
  number: 0,
};
// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    case DELETE_NUMBER:
      return {
        number: state.number - action.payload,
      };
    default:
      return state;
  }
};
// export default reducer
export default counter;

/src/redux/cofig/configStore.js
import { createStore } from 'redux';
import { combineReducers } from 'redux';
import counter from '../modules/counter';
/*
1. createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 
리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 
리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
*/

/*
2. combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠? 
이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다. 
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
*/

const rootReducer = combineReducers({
  counter: counter,
});
const store = createStore(rootReducer);

export default store;

/src/index.js
// 원래부터 있던 코드
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

// 우리가 추가할 코드
import store from './redux/config/configStore';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //App을 Provider로 감싸주고, configStore에서 export default 한 store를 넣어줍니다.
  <Provider store={store}>
    <App />
  </Provider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();