Redux 订阅并更新到 UI

Question

我能够在单击按钮期间正确地控制台记录增量和减量结果。我正在尝试使用 myStore.getState() 更新 UI，但似乎不起作用。如何订阅和更新 UI？非常感谢，提前。

import React from 'react';
import './App.css';
import {createStore} from 'redux'
import counterReducer from './reducers'
import {increment,decrement} from './actions';

const myStore = createStore(counterReducer)

const handleIncrement = () => {
  myStore.dispatch(increment(2))
  console.log(myStore.getState())

}
const handleDecrement = () => {
  myStore.dispatch(decrement(2))
  console.log(myStore.getState())
}

function App() { 
  return (
    <div className="App">
       <h1>Counter {myStore.getState()}</h1>
       <button onClick={handleIncrement}>+</button>
       <button onClick={handleDecrement}>-</button>
    </div>
  );
}
export default App;

Answer 1

根据 react-redux 文档：

“useSelector() 还将订阅 Redux 存储，并在分派操作时运行您的选择器”

因此，每次您分派一个操作时，

useSelector

钩子都会运行并返回一个新的

counter

值，并使用新的

counter

重新渲染您的组件。

您的

App

组件可能看起来像这样。

import React from 'react'
import { useSelector } from 'react-redux'

function App() { 
  const counter = useSelector(state => state.counter)
  return (
    <div className="App">
       <h1>Counter {counter}</h1>
       <button onClick={handleIncrement}>+</button>
       <button onClick={handleDecrement}>-</button>
    </div>
  );
}

使用 Redux 订阅

function App() { 
  const [state, updateState] = React.useState({});
  // subscribing to the redux store
  store.subscribe(() => updateState(store.getState()))
  return (
    <div className="App">
       <h1>Counter {state.counter}</h1>
       <button onClick={handleIncrement}>+</button>
       <button onClick={handleDecrement}>-</button>
    </div>
  );
}