React MobX наблюдаемые продолжают сбрасываться - PullRequest
Новая
       19

React MobX наблюдаемые продолжают сбрасываться

0 голосов
/ 09 апреля 2019

Я столкнулся с проблемой, из-за которой наблюдаемые в моем магазине MobX продолжают сбрасываться при навигации по маршруту / при загрузке компонентов. Сценарий таков: пользователь выбирает учетную запись и сохраняет ее в selectedAccount наблюдаемой.

selectedAccount будет проанализирован для компонента защиты, который проверяет, была ли выбрана учетная запись или нет. Если нет, пользователь должен выбрать учетную запись и будет перенаправлен на страницу приветствия, которая использует компонент защиты. Но при навигации selectedAccount сбрасывается на пустой объект и, следовательно, компонент защиты перенаправляет обратно на страницу выбора учетной записи.

Мне интересно, связано ли это с инициализацией магазина, в котором хранится selectedAccount: 

export interface IUserStore {
users: any;
singleUser: any;
selectedAccount: any;
getUsers(): Promise<void>;
createUser(obj: any): any;
selectAccount(obj: any): any;
getSingleUser(id: string): Promise<void>;
updateUser(obj: any): any;

} 

export class UserStore implements IUserStore {
@observable users: any = [];
@observable singleUser: any = {};
@observable selectedAccount: any = {};
@observable state = "pending"; // "pending" / "done" / "error"

Компонент защиты: 

interface AppProps extends RouteProps {
userStore: IUserStore

} 

@inject('userStore')
@observer
export class AccountRequired extends Route<any> {
public render() {

    if (Object.keys(this.props.userStore.selectedAccount).length == 0) {
        const renderComponent = () => (<Redirect to={{pathname: "/selectAccount"}}/>);
        return <Route {...this.props} component={renderComponent} render={undefined}/>;
    } else {
        return <Route {...this.props}/>;
    }
  }
}

экспорт по умолчанию AccountRequired;

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

Чего мне не хватает?

Обновление:

Здесь я включаю провайдера. index.tsx: 

// Stores
import { stores  } from './Stores';

ReactDOM.render(<Provider {...stores }><App /></Provider>, document.getElementById('root'));

Все магазины здесь экспортируются. Магазины / индекс: 

import { AccountStore } from "./AccountStore";
import { UserStore } from "./UserStore";
import { RolesStore } from "./RoleStore";

interface Stores {
  [key: string]: any;
 }

export const stores:Stores = {
   accountStore: new AccountStore(),
   userStore: new UserStore(),
   rolesStore: new RolesStore()
}

Ответы [ 2 ]

0 голосов
/ 09 апреля 2019

Оказывается, я не использовал Link для перенаправления, я использовал якорные теги.

Таким образом, замена якорных тегов на react-router Link решила проблему.

Для всех, кто сталкивается с такой же проблемой, mobx-persist - это библиотека, которая может сохранять значение obeservables при обновлении страницы.

0 голосов
/ 09 апреля 2019

С Документы Mobx :

Наблюдаемые объекты MobX не обнаруживают и не реагируют на присвоения свойств, которые ранее не были объявлены наблюдаемыми.Таким образом, наблюдаемые объекты MobX действуют как записи с предопределенными ключами.

Вы можете попробовать одно из следующих действий:

...