javascript - React-Redux:Invalid hook call while trying to dispatch an action assigning a nested array with another one

Question

This is my first project using React-Redux.I am trying to assign the array which is returned from the MoveDown() function to the array in the state when dispatching the moveDown() action.

Action:

export const moveDown = () => {
    return {
    type: MOVE_DOWN,
    };
};

Here is the function called everytime I press a specific button :

  const Press = () => {
       dispatch(moveDown());
  };

Initial state:

 export const initialState = {
     board: {
        gridSize: 4,
        arr: [
               [0, 0, 0, 0],
               [0, 2, 4, 0],
               [0, 0, 16, 2],
               [0, 2, 32, 0],
               ],
    },
};

And the reducer and function that I call in order to change the array which returns another array:

export const board = (state = initialState.board, action) => {
       if (action.type == MOVE_DOWN) {
              return {
                     ...state,
                     arr: MoveDown(),
              };
       }
       return state;
};
const MoveDown = () => {
        const mat = useSelector((state) => state.board.arr);
        const size = useSelector((state) => state.board.gridSize);
        var ok = 1;
        for (var j = 0; j < size; j++) {
             while (ok) {
                    ok = 0;
                    for (var i = size - 2; i < 0; i--) {
                            if (mat[i][j] != 0) {
                                 if (mat[i + 1][j] == mat[i][j]) {
                                      mat[i][j] = 0;
                                      mat[i + 1][j] = 2 * mat[i + 1][j];
                                      ok = 1;
                                 } else {
                                        if (mat[i + 1][j] == 0) {
                                                 mat[i + 1][j] = mat[i][j];
                                                 ok = 1;
                                        }
                                   }
                           }
                    }
           }
       }
    return mat;
 };

question from:https://stackoverflow.com/questions/65540691/react-reduxinvalid-hook-call-while-trying-to-dispatch-an-action-assigning-a-nes

Answer 1

Code looks pointless, as you are using useSelector hook inside reducer... useSelector is a hook to use inside component to get a faster access to state values as an alternative to mapStateToProps. In your case it is enough to pass state value to MoveDown function as parameter and read it directly

export const board = (state = initialState.board, action) => {
       if (action.type == MOVE_DOWN) {
              return {
                     ...state,
                     arr: MoveDown(state),
              };
       }
       return state;
};
const MoveDown = state => {
        const mat = state.arr;
        const size = state.gridSize;
        // ...etc

But your function has another problems you will encounter, for example this loop will not work

for (var i = size - 2; i < 0; i--) 

because second parameter is a condition for loop to work, it should be most probably i >= 0, otherwise ot it will never start if size - 2 is positive number, or it will never end if is negative

PS Also js code style prescribes to use camel case for function names so it should not start from capital M