Question

我没有改变状态（据我所知），并且没有错误。它仅显示按钮和数字10。单击按钮不会使数字10递增，但是如果我查看react dev工具中的状态，则math.value确实在递增。这使我认为我正在变异状态，但我却没有。



import React, {Component} from "react";

import { Provider } from 'react-redux'
import { createStore, combineReducers } from 'redux'

//action
const add = () => {
  return {
    type: 'ADD'
  }
}

const mathReducer = (state = { value: 10}, action) => {

  switch (action.type) {
    case 'ADD':
      return {
        value: state.value + 1
      }
  }

  return state
}

const reducers = combineReducers({
  math: mathReducer
}) 

let store = createStore(
    reducers, /* preloadedState, */
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

export default class App extends Component { 

  render() {
    return (

      <Provider store={store}>
        <button onClick={() => store.dispatch(add())}>+</button>
        <p>{store.getState().math.value}</p>
      </Provider>
    )
  }

}

Answer 1

您正在通过分派来更改状态，但是您的组件不是connected到商店，因此它看不到任何更改。如果要以其他方式强制渲染，则会通过store.getState().math.value看到增量值。

这样想：有人告诉您的朋友一个秘密。你的朋友没有告诉你这个秘密。即使您不知道，朋友仍然知道秘密并且秘密存在。：）

为什么即使我不改变状态，组件也不重绘？

1 个答案: