Блог

Я столкнулся с проблемой, из-за которой наблюдаемые объекты моего хранилища 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}/>;
    }
  }
}
  

требуется экспортировать учетную запись по умолчанию;

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

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

Обновить:

Вот где я указываю провайдера. 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()
}
  

Из Mobx docs:

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

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

• обновление до Mobx v5
• используйте observable.map вместо observable
• обновить / добавить selectedAccount с помощью selectedAccount.set (ключ, значение)

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

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

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