Для того чтобы обновить переменную в Redux Store при загрузке страницы в React, нужно выполнить несколько шагов.
- Установите Redux в вашем проекте, используя команду
npm install redux
илиyarn add redux
. При необходимости установите дополнительные пакеты, такие какreact-redux
иredux-thunk
.
- Создайте файлы для хранения вашего состояния Redux -
actions.js
,reducers.js
иstore.js
. В файлеactions.js
определите функцию действия, которая будет обновлять переменную в Redux Store. Например:
// actions.js export const updateVariable = (value) => { return { type: 'UPDATE_VARIABLE', payload: value }; };
- В файле
reducers.js
создайте редюсер, который будет обрабатывать действие и обновлять состояние. Например:
// reducers.js const initialState = { variable: '' }; const reducer = (state = initialState, action) => { switch (action.type) { case 'UPDATE_VARIABLE': return { ...state, variable: action.payload }; default: return state; } }; export default reducer;
- В файле
store.js
создайте Redux Store, используя ваш редюсер. Например:
// store.js import { createStore } from 'redux'; import reducer from './reducers'; const store = createStore(reducer); export default store;
- Наконец, оберните вашу корневую компоненту приложения в компонент
Provider
изreact-redux
, передавая ему ваш Redux Store. Например:
// index.js import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import store from './store'; import App from './App'; ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );
Теперь, при загрузке страницы, вы можете диспетчировать действие updateVariable
и передать нужное значение в переменную внутри вашей компоненты. Это значения будет записано в Redux Store и будет доступно в вашем приложении.