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

Posted 2023-02-22

【中文标题】根据 React-Redux 状态的动态页面不更新渲染数据

【英文标题】：Dynamic Page according to React-Redux state not updating rendered data

【发布时间】：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 状态时，呈现的页面不会更新并停留在默认页面。

【参考方案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 获取更新的页面值。