Блог

Главная - Вопросы по программированию - Состояние Redux-toolkit не обновляется

Состояние Redux-toolkit не обновляется

#reactjs #state #redux-toolkit

#reactjs #состояние #redux-toolkit

Вопрос:

Я создаю логин и в функции .then устанавливаю состояние пользователя. Данные установлены правильно, но после перенаправления (через код) на следующую страницу я не смог получить доступ к новому состоянию с помощью функции useSelector.

Login.js

 const handleSubmit = useCallback((e) => {
    async function getUser(){
      return await login(username, password);
    }
    e.preventDefault();
    getUser()
    .then((userObj) => {
      if(userObj.user._id !== undefined){
        dispatch(setAuthUser(userObj.user));
        message.current.innerHTML = '';
        window.location = `/Shops/Near/`;
        history.push('/Shops/Near/');
      }
      else{
        message.current.innerHTML = 'Invalid username or password, try again!';
      }
    });
  }, [username, password]);

Shops.js

 import { useSelector } from 'react-redux';

const Shops = () => {
  const [shops, setShops] = useState([]);
  const [isPreferedPage, setIsPreferedPage] = useState(false);
  const message = useRef(null);
  const user = useSelector((state) => {
    console.log(state.user);
    return state.user;
  }); //bug

userSlice.js

 import { createSlice } from '@reduxjs/toolkit'

const initialState = {
};

export const user = createSlice({
  name: 'user',
  initialState,
  reducers: {
    setAuthUser: (state, action) => {
      state = action.payload;
    },

Я хочу знать, в чем проблема, я попытался удалить асинхронный вызов и даже установить состояние в пустой вызов, но все равно он никогда не обновлялся.

Спасибо

Ответ №1:

Вы не можете сделать state = так, чтобы это не изменяло объект state , но выбрасывало объект state и помещало новый в переменную.

state.foo = было бы хорошо, state = нет.

Сделайте return action.payload вместо этого.

Смотрите также https://redux-toolkit.js.org/usage/immer-reducers#resetting-and-replacing-state

Комментарии:

1. Спасибо за ответ. К сожалению, возврат action.payload не работает. Также использовать state.foo = и определять его в initialeState не работает.

2. Вам также нужно будет отправить свое действие, поэтому не вызывайте setAuthUser(user) , но dispatch(setAuthUser(user)) — вы не поделились этим кодом, поэтому я не мог это прокомментировать.

3. const handleSubmit = useCallback((e) => { async function getUser(){ return await login(username, password); } e.preventDefault(); getUser() .then((userObj) => { if(userObj.user._id !== undefined){ dispatch(setAuthUser(userObj.user)); message.current.innerHTML = ''; window.location = / Магазины / Рядом / ; history.push('/Shops/Near/'); } else{ message.current.innerHTML = 'Invalid username or password, try again!'; } }); }, [username, password]); Я использовал его так: (

4. Может userObj.user ли быть просто undefined ? Используете ли вы расширение браузера Redux Devtools? Что вы там видите?

5. Нет, оно имеет допустимое значение и отправку, если оно запущено, плюс полезная нагрузка имеет правильные значения. Я не эксперт в Redux DevTools ext.

Метки: