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

2021-09-22T02:55:58.518Z

0

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;

0

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

0

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

0

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