Обновить вложенный объект в массиве в React с помощью Redux - PullRequest
Новая
       22

Обновить вложенный объект в массиве в React с помощью Redux

1 голос
/ 16 июня 2020

Я пытаюсь изменить статус в массиве пользователей. Я пытаюсь обновить статус на «Да». Как я могу получить доступ к его данным без изменения состояния?

Пожалуйста, посмотрите этот код и ссылку

НАЖМИТЕ ЗДЕСЬ 

const dispatch = useDispatch();
  const isLoading = useSelector(state => state.user.isLoading);
  const users = useSelector(state => state.user.users);

  const onApprove = user => {
    dispatch(approveUser(user));
  };

  useEffect(() => {
    dispatch(getUsers());
  }, [dispatch]);

Ответы [ 2 ]

1 голос
/ 16 июня 2020

Обновите действие approveUser, чтобы выполнить и передать user

export function approveUser(user) { // <-- receive user object
  return dispatch => {
    dispatch({
      type: userConstants.APPROVE_USER_REQUEST
    });
    dispatch({
      type: userConstants.APPROVE_USER_SUCCESS,
      payload: {
        approved: "HAHAHHA"
      },
      user, // <-- pass user object
    });
    dispatch({
      type: userConstants.APPROVE_USER_FAILURE,
      payload: {}
    });
  };
}

Затем обновите редуктор для распространения обновления. Используйте полученный объект user для сопоставления нового статуса «да» . 

case userConstants.APPROVE_USER_SUCCESS:
  return {
    ...state,
    isLoading: false,
    users: state.users.map(user => user.id === action.user.id ? {
      ...user,
      status: 'yes',
    } : user)
  };

Edit Update State Redux

1 голос
/ 16 июня 2020

, чтобы изменить состояние в редукторе без изменения, попробуйте следующее: 

    case 'YOUR_ACTION':
        return {
            ...state,
            users: state.users.map((user) =>
                user.id === action.userId
                    ? {
                          ...user,
                          status: 'yes', // or you could action.status
                      }
                    : user,
            ),
        }

Я сопоставляю все users, затем сопоставляю user.id с отправленным из действия и меняю статус его до yes. если не совпадает, просто возвращаем user

...