根据 React-Redux 状态的动态页面不更新渲染数据答案

【问题标题】：Dynamic Page according to React-Redux state not updating rendered data根据 React-Redux 状态的动态页面不更新渲染数据
【发布时间】：2020-08-12 15:53:38
【问题描述】：

我想构建一个单页登录系统，根据我在 React-Redux 商店中设置的状态呈现不同的页面。 render() {} 函数不会在 store 状态更新时更新。

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 Action 的组件，它改变了 page 字段的状态。为简单起见，未显示此内容。确认了状态的变化，因为 Redux 开发工具告诉我，当我调度操作以更改 page Redux 状态时，状态发生了变化。当我更改 page 字段的 Redux 状态时，呈现的页面不会更新并停留在默认页面。

【问题讨论】：

标签： javascript reactjs redux react-redux react-router-dom

【解决方案1】：

不要将 page 作为隐式 prop 传递给 Renderer，而是使用 react-redux connect 以便使用 mapStateToProps 函数将此 prop 传递给组件：

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-reduxconnect 包装器负责对商店的订阅 - 因此您的组件将在每次商店更新时从 Provider 获取更新的页面值。

【讨论】：