redux state 변경 질문

[황승현]

개인 프로젝트 만들고 있습니다. redux에서 2차원 array state변경함수를 쓰려는데 배열에서 몇번째를 수정하고 싶은지 계속 바뀌는 상황이라 변경함수에 몇번째를 지정하는 파라미터를 추가하고 싶은데 어떻게 코드를 짜야 하나요?

[codingapple]

dispatch()쓸 때 몇번째를 수정할지도 소괄호 안에 같이 보내면 될듯요

[황승현]

redux 변수 저장해놓은 store.js에 있는 2차원 배열입니다. 여기서 dispatch를 어떻게 사용해야 하는지 모르겠습니다. 

let 바둑판 = createSlice({
  name: "바둑판",
  initialState: [
    [[0], [0], [0], [0], [0], [0], [0], [0]],
    [[0], [0], [0], [0], [0], [0], [0], [0]],
    [[0], [0], [0], [0], ["black-border"], [0], [0], [0]],
    [[0], [0], [0], ["black"], ["white"], ["black-border"], [0], [0]],
    [[0], [0], ["black-border"], ["white"], ["black"], [0], [0], [0]],
    [[0], [0], [0], ["black-border"], [0], [0], [0], [0]],
    [[0], [0], [0], [0], [0], [0], [0], [0]],
    [[0], [0], [0], [0], [0], [0], [0], [0]],
  ],
  reducers: {
    바둑판변경(state, action) {/*바둑판[i][j]의 자료를 파라미터를 받아서 변경하고 싶음*/},
  },
});

[codingapple]

행과 열 2개 정보 전달하면 될거같은데 그걸 array같은데 담아서 dispatch(변경함수(array)) 합시다

[황승현]

let 바둑판 = createSlice({
  name: "바둑판",
  initialState: [
    [[0], [0], [0], [0], [0], [0], [0], [0]],
    [[0], [0], [0], [0], [0], [0], [0], [0]],
    [[0], [0], [0], [0], ["black-border"], [0], [0], [0]],
    [[0], [0], [0], ["black"], ["white"], ["black-border"], [0], [0]],
    [[0], [0], ["black-border"], ["white"], ["black"], [0], [0], [0]],
    [[0], [0], [0], ["black-border"], [0], [0], [0], [0]],
    [[0], [0], [0], [0], [0], [0], [0], [0]],
    [[0], [0], [0], [0], [0], [0], [0], [0]],
  ],
  reducers: {
    바둑판변경(state, action) {
      state[action[0]][action[1]] = action[2];
    },
  },
});

 
function Stone(props) {
  let dispatch = useDispatch();
  return (
    <div
      className="background"
      onClick={() => {
        dispatch(바둑판변경([props.i, props.j, "black"]));
      }}
    >
      <div className={`circle ${props.바둑판}`}></div>
    </div>
  );
}


stone은 하위 컴포넌트이고 i, j를 props로 전송했습니다. Cannot set properties of undefined (setting 'undefined')라는 에러가 dispatch(바둑판변경([props.i, props.j, "black"]));에서 나오는데 어떤게 문제인지 모르겠습니다.

[황승현]

state[action.payload[0]][action.payload[1]] = action.payload[2]; 로 바꾸니까 해결됬네요. array로 담아서 전송하는게 핵심이였네요. 감사합니다.

[황승현]

보드게임에서 번갈아가며 차례를 정하는 변수를 만들었는데요, 1과 2가 번갈아가며 나오게 했는데 왜인지 안되네요

let 누구차례냐 = createSlice({
  name: "누구차례냐",
  initialState: 1,
  reducers: {
    차례변경(state) {
      if (state == 1) {
        return 2;
      } else if (state == 2) {
        return 1;
      }
    },
  },
});
요게 store.js에 있는 코드고,
 
  return (
    <div
      className="background"
      onClick={() => {
        if (누구차례냐 == 1) {
          dispatch(바둑판변경([props.i, props.j, "black"]));
          차례변경();
          console.log(누구차례냐);
        } else if(누구차례냐 == 2){
          dispatch(바둑판변경([props.i, props.j, "white"]));
          차례변경();
        }
      }}
    >
      <div className={`circle ${바둑판[props.i][props.j]}`}></div>
    </div>
  );
요게 컴포넌트입니다. console.log로 클릭할때마다 출력해봤는데 1만 나와요. 제가 어떤걸 잘못한걸까요?

[codingapple]

차례변경 함수 정의 안에서 출력해보면 잘 변경되고 있을 수도 있습니다

[황승현]

똑같은 컴포넌트가 64개 연달아 놓여있습니다. 이게 제가 원하는대로 작동하지 않는 이유가 될까요?

[황승현]

차례변경 함수를 dispatch로 안 감싸서 생긴 문제였네요. 나는 바보입니다.

[글쓴이]

글