在Redux狀態更改時重新渲染React組件

Question

我已經創建了一個非常簡單的React / Redux應用程序，並且我正在努力獲取狀態變化時重新渲染的簡單組件。 我正在使用create-react-app作為起點。 在Dan Abramov觀看的視頻系列（ https://egghead.io/lessons/react-redux-react-todo-list-example-adding-a-todo ）中，他為Root訂閱了根渲染功能存儲，每次派發變更時都會調用。 在不使用Connect的情況下，我想了解如何使Value組件在狀態更改時重新呈現。

謝謝！

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import registerServiceWorker from './registerServiceWorker'
import { createStore } from 'redux'

const counter = (state = 0, action) => {
  console.log(action)
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

const store = createStore(counter)

ReactDOM.render(<App store={store} />, document.getElementById('root'))
registerServiceWorker()

app.js

import React, { Component } from 'react'
import logo from './logo.svg'
import './App.css'
import Counter from './components/Counter'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Counter
          value={this.props.store.getState()}
          onIncrement={() =>
            this.props.store.dispatch({
              type: 'INCREMENT'
            })
          }
          onDecrement={() =>
            this.props.store.dispatch({
              type: 'DECREMENT'
            })
          }></Counter>
      </div>
    )
  }
}

export default App;

Counter.js

import React from 'react'
import Value from './Value'

const Counter = ({ value, onIncrement, onDecrement }) => {
  return (
    <div>
      <Value value={value}></Value>
      <button onClick={onIncrement}>+</button>
      <button onClick={onDecrement}>-</button>
    </div>
  )
}

export default Counter

Value.js

import React from 'react'

const Counter = ({ value }) => {
  return (
    <h1>{value}</h1>
  )
}

export default Counter

Answer 1

在不使用Connect的情況下，我想了解如何使Value組件在狀態更改時重新呈現

我們要做的第一件事是subscribe任何redux狀態更改。 我們將redux-state設置為您應用的本地狀態，並在每次redux-state更新時更新該狀態：

/* app.js */

componentDidMount(){
  this.props.store.subscribe(() => {
    this.setState({reduxState: this.props.store.getState()});
  });
}

然后，將狀態傳遞給子組件：

render(){
  return (
    <Counter value={this.state.reduxState} ... />
  )
}

Answer 2

這是否有助於澄清流程？

class App extends Component {
  constructor (props) {
    super(props)
    this.state = { counter: 0 }
    const { store } = props
    this.unsubscribe = store.subscribe(() => {
      const counter = store.getState()
      if (counter !== this.state.counter) {
        this.setState({ counter })
      }
    })
  }

  render () {
    return (
      <div className='App'>
        <Counter
          value={this.state.counter}
          onIncrement={() =>
            this.props.store.dispatch({
              type: 'INCREMENT'
            })
          }
          onDecrement={() =>
            this.props.store.dispatch({
              type: 'DECREMENT'
            })
          } />
      </div>
    )
  }
}

注意事項：

1. 除了學習之外，這不是一個很好的解決方案。 react-redux以一種更加可維護和高效的方式做到這一點。
2. 顯然，Redux狀態通常是一個對象，而不是單個整數。
3. .subscribe本質上只是設置事件偵聽器的一種方法。 狀態更新時，將調用任何附加的處理程序。 盡管處理不必要的渲染的明智預防措施在清單上非常重要，但是您在處理程序中所做的工作完全取決於您。