Dynami c Страница в соответствии с состоянием React-Redux не обновляет отображаемые данные - PullRequest
Новая
       31

Dynami c Страница в соответствии с состоянием React-Redux не обновляет отображаемые данные

1 голос
/ 28 апреля 2020

Я хочу создать одностраничную систему входа в систему, которая отображает разные страницы в соответствии с состоянием, которое я установил в хранилище React-Redux. Функция render() {} не обновляется при обновлении состояния магазина.

App.js

import React from 'react'

import store from './redux/store'
import { Provider } from 'react-redux'

// Route to Renderer.js below
import Renderer from './Renderer'

class App extends React.Component {
    render() {
        return (
            <Provider store={ store }>
                <Renderer page={store.getState().page} />
            </Provider>
        )
    }
}

export default App;

Renderer.js

import React, { Component } from 'react'

// Routes to my pages I plan to render
import Login from './routes/Login'
import About from './routes/About'
import Register from './routes/Register'

class Renderer extends Component {
    render() {
        let page = this.props.page
        let returned

        switch (page) {
            case 'About':
                returned = <About />
                break
            case 'Login':
                returned = <Login />
                break
            case 'Register':
                returned = <Register />
                break
            default:
                returned = <About />
        }

        return returned
    }
}

export default Renderer

У меня есть Компонент связан с действием Redux, которое изменило состояние поля page. Это не показано для простоты. Изменение в состоянии подтверждается, потому что Инструменты разработки Redux говорят мне, что состояние изменилось, когда я отправил действия по изменению состояния page Redux. Когда я изменяю состояние Redux поля page, отображаемая страница не обновляется и остается на странице по умолчанию.

1 Ответ

1 голос
/ 28 апреля 2020

Вместо передачи page в качестве неявного реквизита Renderer, используйте react-redux connect для передачи этого реквизита компоненту с использованием функции mapStateToProps:

Renderer.js

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

// Routes to my pages I plan to render
import Login from './routes/Login'
import About from './routes/About'
import Register from './routes/Register'

class Renderer extends Component {
    render() {
        let page = this.props.page
        let returned

        switch (page) {
            case 'About':
                returned = <About />
                break
            case 'Login':
                returned = <Login />
                break
            case 'Register':
                returned = <Register />
                break
            default:
                returned = <About />
        }

        return returned
    }
}

const mapStateToProps = (state)=>({
  page: state.page
})

export default connect(mapStateToProps)(Renderer)

App.js

import React from 'react'

import store from './redux/store'
import { Provider } from 'react-redux'

// Route to Renderer.js below
import Renderer from './Renderer'

class App extends React.Component {
    render() {
        return (
            <Provider store={ store }>
              // remove the page prop here
                <Renderer />
            </Provider>
        )
    }
}

export default App;

Пропуская страницу в следующем виде: page={store.getState().page} ваш Renderer компонент фактически не подписывается на изменения в хранилище, поэтому он всегда будет возвращать начальное page значение.

Оболочка react-redux connect позаботится об этой подписке в магазине - поэтому ваш компонент будет получать обновленное значение страницы из Provider при каждом обновлении магазина.

...