React-Redux：尝试调度将嵌套数组分配给另一个数组的操作时，挂钩调用无效

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;
 };

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

Answer 2

React hooks should be used only inside react function component or another react hook.

useSelector is a react hook. But you are calling it from a normal JavaScript function.

I have modified your code, feel free to give it a try

export const board = (state = initialState.board, action) => {
       if (action.type == MOVE_DOWN) {
              return {
                     ...state,
                     arr: MoveDown(state),
              };
       }
       return state;
};
const MoveDown = (boardState) => {
        const mat = boardState.arr;
        const size = boardState.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;
 };