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

Question

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

标签： javascriptreactjsreduxreact-reduxreact-router-dom

Answer 1

不要page作为隐式 prop 传递给Renderer，而是使用react-reduxconnect 以便使用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 prop： page={store.getState().page}您的Renderer组件实际上并不订阅存储更改，因此它将始终返回初始page值。

包装器负责对商店的react-redux connect订阅 - 因此您的组件将从Provider每次商店更新时获取更新的页面值。