根據 React-Redux state 的動態頁面不更新呈現的數據

Question

我想構建一個單頁登錄系統，根據我在 React-Redux 商店中設置的 state 呈現不同的頁面。 當商店的 state 更新時， render() {} function 沒有更新。

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字段的 state。 為簡單起見，未顯示此內容。 The change in the state is confirmed because the Redux Development Tools tells me that the state changed when I dispatch the actions to change the page Redux state. 當我更改page字段的 Redux state 時，呈現的頁面不會更新並停留在默認頁面。

Answer 1

不要將page作為隱式 prop 傳遞給Renderer ，而是使用react-redux connect 以便使用mapStateToProps function 將此 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 屬性： page={store.getState().page}您的Renderer組件實際上並不訂閱存儲更改，因此它將始終返回初始page值。

react-redux connect包裝器負責對商店的訂閱 - 因此您的組件將在每次商店更新時從Provider那里獲得更新的頁面值。