인프런 커뮤니티 질문&답변

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

리덕스 실제 구현하기

안녕하세요.. 리덕스 연습하는 중에 막혀서 질문드립니다..

작성

·

208

0

안녕하세요. 리덕스를 공부하고 혼자 연습하는데 잘 모르겠어서 질문 드립니다.. 

리덕스가 개념은 이해가 가도 실제 사용하는게 어려워서 다른 여러 강의나 글들을 보면서 연습해보고 있습니다.

 


예제출처 해당 강의가 옛날꺼라 클래스형 컴포넌트를 쓰기 때문에 예제만 따오고 함수형 컴포넌트를 사용해서 해보고 있습니다.



코드

스토어에는 number와 size 두개의 state가 있습니다.
AddNumber의 input에 값을 입력하면 그 값이 스토어의 size에 업데이트 됩니다.

+와 - 버튼을 누르면 그 input에 입력한 값만큼 number에 더해지고, displaynumber에 보여져야 합니다.

+와 -버튼을 눌렀을 때 number값이 새로 업데이트 되도록 만들고 싶은데, increase와 decrease 액션을 생각대로 만들기가 쉽지 않습니다. 현재 input값이 바뀔 때 스토어의 size가 바뀌는것까지 성공한 상황입니다.

handleActions으로 리듀서함수를 만들었는데, 이부분이 의심스럽습니다.

const Add = handleActions(
  {
    [INCREASE]: (state, action) => ({
      ...state,
      number: state.number + state.size,
    }),
    [DECREASE]: (state, action) => ({
      ...state,
      number: state.number - state.size,
    }),
    [CHANGE_INPUT]: (state, action) => ({
      ...state,
      size: action.payload,
    }),
  },
  initialState
);

CHANGE_INPUT 액션은 말을 잘듣는데, INCREASE와 DECREASE는 잘 모르겠습니다 !!ㅜㅜ

increase나 decrease가 왜 addnumber 컴포넌트로 안가져와지는지,

함수가 state의 size를 가져와서 쓸수있도록 하고싶은데

어떻게 코드를 짜야 생각한대로 움직일지,,

추석에 질문 보내서 죄송합니다. 천천히 답변해주시면 정말 감사하겠습니다. 해피추석되시길 바라요. 감사합니다~

Next.js nodejs express react redux

답변 1

0

제로초(조현영)

지식공유자

컴포넌트도 같이 올려주셔야겠죠? increase, decrease할 때는 action은 쓸 필요가 없나요?

질문자

addnumber.js

import React from "react";

const AddNumber = ({ size, increase, decrease, onChangeInput }) => {
  const onChange = (e) => onChangeInput(e.target.value);
  
  return (
    <div>
      <h1>AddNumber</h1>
      <input type="button" value="+" onClick={increase}></input>
      <input type="button" value="-" onClick={decrease}></input>
      <input type="text" value={size} onChange={onChange} />
    </div>
  );
};

export default AddNumber;

addContainer.js

import React from "react";
import { connect } from "react-redux";
import AddNumber from "../components/AddNumber";
import { increase, decrease, changeInput } from "../modules/Add";

const AddContainer = ({ size, changeInput, increase, decrease }) => {
 
  return (
    <AddNumber
      size={size}
      onChangeInput={changeInput}
      onIncrease={increase}
      onDecrease={decrease}
    />
  );
};

export default connect(
  (state) => ({
    size: state.Add.size,
    number: state.Add.number,
  }),
  {
    increase,
    decrease,
    changeInput,
  }
)(AddContainer);

위 컴포넌트에서 리듀서와 연동을 해서 addnumber 컴포넌트에 넘겨줍니다.

action은 쓸 필요가 없나요? 라는 말씀이 잘 이해가 안갑니다ㅜㅜ 이 부분을 말씀하시는건가요

[INCREASE]: (state, action) => ({
      ...state,
      number: state.number + state.size,
    }),
    [DECREASE]: (state, action) => ({
      ...state,
      number: state.number - state.size,
    }),

액션생성함수에 파라미터로 넣을 값을 action.payload 라는 이름으로 넣는다고 알고 있는데,

컴포넌트에서 파라미터로 넣는게 아니라 스토어에 있는 size를 쓰도록 하고싶어서 바로 state.size를 더해서 반환하도록 했습니다.

modules/Add.js 추가합니다

import { createAction, handleActions } from "redux-actions";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";
const CHANGE_INPUT = "CHANGE_INPUT";
export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);
export const changeInput = createAction(CHANGE_INPUT, (input) => input);

const initialState = {
  number: 0,
  size: 1,
};

const Add = handleActions(
  {
    [INCREASE]: (state, action) => ({
      ...state,
      number: state.number + state.size,
    }),
    [DECREASE]: (state, action) => ({
      ...state,
      number: state.number - state.size,
    }),
    [CHANGE_INPUT]: (state, action) => ({
      ...state,
      size: action.payload,
    }),
  },
  initialState
);

export default Add;

제로초(조현영)

지식공유자

redux-devtools 쓰시나요? 그걸로 분석해보세요. 코드에는 문제가 없어 보입니다(제가 handleActions같은 스타일을 써본적이 없어 정확히는 모르겠습니다).

질문자

알겠습니다. 액션 자체가 뜨지를 않네요ㅜㅜ 즐거운 연휴 되세요~~😁

제로초(조현영)

지식공유자

액션 자체가 뜨지 않는다는 것은 액션 호출 방법이 잘못된 것 같습니다. dispatch 함수를 쓰고 계신 게 맞나요? 코드에 dispatch가 안 보이네요.

작성한 질문수