В ответ хранилище useReducer теряет состояние при переходе на другую страницу. useContext загружает только начальное состояние - PullRequest
Новая
       103

В ответ хранилище useReducer теряет состояние при переходе на другую страницу. useContext загружает только начальное состояние

0 голосов
/ 06 августа 2020

Состояние хорошо сохраняется на странице и изменяется и становится интерактивным, но как только я перехожу на другую страницу, состояние сбрасывается

Все хранилище и createContext имеют 

type Action2 =
   {
      type: "ON";
      payload: boolean;
    }
  | {
      type: "OFF";
      payload: boolean;
}


type State2 = {
  isLoggedIn: boolean
};

const reducer2 = (state: State2, action: Action2): State2 => {
  switch (action.type) {
    case "ON":
      return {
        isLoggedIn:true
      };
    case "OFF":
      return {
        isLoggedIn:false
      };
    default:
      return state;
  }
};


const initialState: State2 = {
  isLoggedIn: false
};

состояние инициализации 

const [state2, dispatch2] = React.useReducer(reducer2, {"isLoggedIn":false});

кнопки для изменения состояния 

<Button onClick={()=>dispatch2({type:"ON",payload:true})}>
            ON
          </Button>
           <Button onClick={()=>dispatch2({type:"OFF",payload:true})}>
            OFF
          </Button>

Обеспечение контекста для элемента, отображаемого в маршрутах 

<Route exact path="/:id" >
<MyContext.Provider value={[state2, dispatch2]}>
            <React.Fragment>
                <PatientPage settingpatient={fetchPatient} context={context}/>
            </React.Fragment>
            </MyContext.Provider>
</Route>

в элементе, состояние доступа к которому я из контекста 

const theme2 = React.useContext(MyContext);

и всегда ли это {isLoggedIn: false}

1 Ответ

1 голос
/ 06 августа 2020

ваш код в порядке, response теряет состояние при переходе на другую страницу (я предполагаю, что вы делаете это из своего браузера), потому что это вызывает перезагрузку страницы, поэтому вы используете компонент history или Link для правильного для навигации используйте react-router

Обычно вы сохраняете state в localHistory или используете файлы cookie для решения проблемы «пользователь вошел в систему» ​​

...