Redux, React-Redux доступ к переменной с одной страницы на следующую

Question

Я определяю переменную в Page1 и хотел бы получить доступ к ней на Page2, а затем при нажатии обратно на Page1 получить ту же переменную

Пока переменная установлена ​​на Page1, но не может быть получена наPage2

index.js

import {createStore, applyMiddleware, combineReducers} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import {Provider} from 'react-redux'
import variableReducer from './reducers'

const store = createStore(
    variableReducer,
    composeWithDevTools(applyMiddleware(thunk))
)

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
)


serviceWorker.unregister();

actions / index.js

export const SET_MY_VARIABLE = 'SET_MY_VARIABLE'

export const setMyVariable =  myVariable => ({
    type: SET_MY_VARIABLE,
    payload: {myVariable}
})

redurs / index.js

import {SET_MY_VARIABLE} from '../actions'

const initialState = {
    myVariable: ''
}

const variableReducer = (state=initialState, action) => {
    switch (action.type) {
        case SET_MY_VARIABLE:
            return {
                ...state,
                myVariable: action.payload.myVariable
            }
        default:
            return state
    }
}

export default variableReducer

компонентов / Page1.js

import React, {useEffect} from 'react'
import {connect, useDispatch} from 'react-redux'
import {setMyVariable} from '../actions'

const Page1 = (props) => {
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(setMyVariable(5000))
    }, [])

    return (
        <div>
            Setting variable<br />
            <a href="/page2">Go to page 2</a>
        </div>
    )
}

const mapState = state => {

    return {
        myVariable: state.myVariable
    }
}

export default connect(mapState)(Page1)

компоненты / Page2.js

import React from 'react'
import {connect} from 'react-redux'

const Page2 = (props) => {

    const {myVariable} = props
    console.log('props: ', props)

    return (
        <div>
            Variable: {myVariable}
        </div>
    )
}

const mapState = state => {
    console.log('map2 ', state.myVariable)
    return {
        myVariable: state.myVariable
    }
}

export default connect(mapState)(Page2)

Я должен иметь возможность устанавливать переменные для хранилища в одном компоненте и получать к ним доступ во всем приложении. Вместо этого я не могу получить их

Answer 1

Я нашел ответ на мою проблему. Мне нужно было поменять тег <a href на <Link> с response-router-dom в компоненте Page1. <a href вызывал полную перезагрузку всего JS и потерял состояние. Вот исправленный компонент:

компоненты / Page1.js

import React, {useEffect} from 'react'
import {connect, useDispatch} from 'react-redux'
import {setMyVariable} from '../actions'
import {Link} from 'react-router-dom'

const Page1 = (props) => {
    const dispatch = useDispatch()

    useEffect(() => {
       dispatch(setMyVariable(5000))
    }, [])

    return (
        <div>
            Variable: {myVariable}<br />
            <Link to="/page2">Go to page 2</Link>
        </div>
    )
}

const mapState = state => {
    return {
        myVariable: state.myVariable
    }
}

export default connect(mapState)(Page1)

Answer 2

Вместо использования action.payload.myVariable используйте action.payload в вашем редукторе / index.js