Как реализовать передачу state при переходе на новую страницу?

Question

[Vlad Yanukovich]

Здравствуйте дамы и господа.

Назрел такой вопрос. Как можно реализовать передачу стейта с одной страницы на другую?

У меня есть корзина (точнее кнопка с отображением количества товаров) - скриншот 1, в нее я складываю товар, который добавил в нее. Если нажать на эту кнопку, мы попадаем в корзину саму.

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

Как можно реализовать сохранение стейта между двумя страницами? (мои догадки локальное хранилище и читал что в этом помогает redux, но от него я знаю только название)

Answer 1

[TRNER]

Так же есть вариант прокинуть стейт через React-router.

Передаем через Link to-object
Получаем через location

Comments

[Vlad Yanukovich]

Хорошо, спасибо, попробую такой вариант

[Vlad Yanukovich]

не понимаю что делать с location, через link to object все понятно, а куда пихать location - не понимаю

[TRNER]

Vlad Yanukovich, например, в useEffects вытащить этот state из location и установить в качестве состояния компоненту.

[Vlad Yanukovich]

TRNER, можно какой-то простецкий пример, а то что-то тяжело до меня пока это доходит

[Vlad Yanukovich]

вроде как разобрался, стейт передается со страницы на страницу, спасибо за подсказку

Answer 2

[Everybody_Lies]

вы правильно подумали на счёт стейт-менеджер, например, redux.
Суть в том, что вся бизнес-логика у вас будет храниться в одном месте (store), и вы сможете обращаться к одним и тем же данным из разных компонентов.
Локальный же стейт используйте для мелких вещей, которые важны только для текущего компонента, например, состояние кнопки (активна/не активна).
вот ссылка для ознакомления с редаксом.

Comments

[Vlad Yanukovich]

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

В любом случае, спасибо за ссыль, сохраню себе, а пока что буду пытаться без редакса что-то придумывать)

[Everybody_Lies]

другой вариант - это прокидывать стейт и функции для изменения стейта через корневой компонент вниз по дочерним.
Приблизительно так:

import state from "./state";
import {addToCard} from './state';
<BrowserRouter>
            <App state={state} addToCard={addToCard} />
        </BrowserRouter>, document.getElementById('root'));

Answer 3

[xirurgx3d]

Вы так же можете использовать кастомные хуки и useReducer
В своем кастомном хуке вы подключаете usereducer ознакомитесь как это делать тут
и подключайте свой хук в нужным вам компонент