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 钩子将运行和 return 一个新的 counter 值并使用新的 [=13] 重新渲染你的组件=].

您的 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>
  );
}

Redux 订阅并更新 UI

Redux Subscribe and update to UI

user-interface

reactjs

redux

redux-store

使用 Redux 订阅