Redux Reducer использует данные с момента моего последнего входа - PullRequest
0 голосов
/ 14 февраля 2019

Я хочу реализовать Редактирование пользователя с помощью Redux в моем проекте.Я создал редуктор EDIT_USER, который работает нормально.Я могу запустить соответствующее действие и этот редуктор из любого места внутри приложения.
Скажем, я хотел изменить цвет заголовка (компонент заголовка действительно высок в дереве компонентов) с кнопки внутри компоновки карты (которая действительно низка).в дереве компонентов).Оно работает.Однако всякий раз, когда я обновляю страницу, цвет заголовка - это цвет, который был при последнем входе пользователя в систему!Это мой редуктор SET_CURRENT_USER:

    case SET_CURRENT_USER:
        return {
            isAuthenticated: Object.keys(action.user).length > 0,
            user: action.user
        };

Это в App.js, который запускает редуктор SET_CURRENT_USER через действие setCurrentUser:

if (localStorage.jwtToken) {
  setAuthorizationToken(localStorage.jwtToken);
  try {
    store.dispatch(setCurrentUser(jwtDecode(localStorage.jwtToken)));
  }
  catch (e) {
    store.dispatch(setCurrentUser({}));
  }
}

Мое ожидаемое поведение следующее.
1. Пользователь входит в систему, заголовок синий (цвет по умолчанию).---- OK
2. Пользователь меняет цвет заголовка на зеленый через кнопку, которая запускает редуктор EDIT_USER.---- ОК
3. Сразу же заголовок меняется на зеленый.--- ОК
4. Я обновляю страницу и заголовок все еще зеленый.---- НЕ ОК (он отображается синим цветом, потому что это был цвет, когда пользователь последний раз входил в систему).
5. Когда я выхожу и снова вхожу, заголовок становится зеленым.---- Хорошо (это ожидается, но пункт 4 - это главная проблема!)

Если вам нужна дополнительная информация, пожалуйста, дайте мне знать!Большое спасибо.

Ответы [ 2 ]

0 голосов
/ 14 февраля 2019

Похоже, в магазине никогда не было.Ваши предыдущие значения state теряются, так как они не были возвращены в редуктор.

Попробуйте это:

case SET_CURRENT_USER:
    return {
        ...state,
        isAuthenticated: Object.keys(action.user).length > 0,
        user: action.user
    };
0 голосов
/ 14 февраля 2019

Вот как я настраиваю свой магазин:

import rootReducer from './reducers/index';  
import { createStore, applyMiddleware, compose  } from 'redux';  
import thunk from 'redux-thunk';  

export function configureStore(){  
  const store = createStore(  
    rootReducer,  
    compose(  
      applyMiddleware(thunk),  
      window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
  ));  

  return store;  
}  
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...