redux state 변경 질문

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]의 자료를 파라미터를 받아서 변경하고 싶음*/},
  },
});

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"]));에서 나오는데 어떤게 문제인지 모르겠습니다.

보드게임에서 번갈아가며 차례를 정하는 변수를 만들었는데요, 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만 나와요. 제가 어떤걸 잘못한걸까요?

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