Для того чтобы обновить переменную в Redux Store при загрузке страницы в React, нужно выполнить несколько шагов.
1. Установите Redux в вашем проекте, используя команду npm install redux
или yarn add redux
. При необходимости установите дополнительные пакеты, такие как react-redux
и redux-thunk
.
2. Создайте файлы для хранения вашего состояния Redux - actions.js
, reducers.js
и store.js
. В файле actions.js
определите функцию действия, которая будет обновлять переменную в Redux Store. Например:
// actions.js export const updateVariable = (value) => { return { type: 'UPDATE_VARIABLE', payload: value }; };
3. В файле 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;
4. В файле store.js
создайте Redux Store, используя ваш редюсер. Например:
// store.js import { createStore } from 'redux'; import reducer from './reducers'; const store = createStore(reducer); export default store;
5. Наконец, оберните вашу корневую компоненту приложения в компонент 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 и будет доступно в вашем приложении.