Question

我已经创建了一个非常简单的React / Redux应用程序，我很难在状态发生变化时让一个简单的组件重新渲染。我使用flush()作为起点。在Dan Abramov（codecs.open）观看的视频系列中，他为商店订阅了一个根呈现函数，每次调度更改时都会调用它。如果不使用Connect，我想了解如何使 Value 组件重新呈现状态更改。

谢谢！

index.js

create-react-app

app.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()

Counter.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;

Value.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

Answer 1

不使用Connect，我想了解如何导致Value 组件重新呈现状态变化

我们要做的第一件事是subscribe任何redux-state变化。我们将redux-state设置为app的本地状态，并在每次更新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>
    )
  }
}

有几点需要注意：

除了学习之外，这不是一个很好的解决方案。 react-redux以更加可维护和高效的方式实现这一目标。
显然，Redux状态通常是一个对象，而不是一个整数。
.subscribe基本上只是一种设置事件监听器的方法。状态更新时，将调用任何附加的处理程序。你在处理程序中所做的事情在很大程度上取决于你，尽管在列表中对不必要的渲染采取明智的预防措施。

在Redux状态更改时重新呈现React组件

2 个答案: