0

我能够在单击按钮期间正确地控制台记录增量和减量结果。我正在尝试使用 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;
4

1 回答 1

1

根据react-redux文档：

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

所以每次你派发一个动作时，useSelector钩子都会运行并返回一个新counter值，并用 new 重新渲染你的组件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>
  );
}
于 2020-06-30T08:01:41.507 回答