CODEWITHSUNDEEP
reactjsredux
garg10may
garg10may

Reputation: 6179

Redux: State is updating but UI not updating

My actions, reducers are all working fine. Even the state is updated in the redux-dev-tools and console. But these are not being rendered on the UI. Aren't the state changes to be automatically picked up by redux and re-rendered.

https://codesandbox.io/s/sad-dewdney-u66j2

import "./styles.css";
import { createStore } from "redux";
import { incrementCount, reducer } from "./reducer";

export default function App() {
  const store = createStore(reducer);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {store.getState().value}
      <button onClick={()=> store.dispatch(incrementCount(1))}>Increment Count</button>
    </div>
  );
}

I don't want to use react-redux and useSelector after which it starts working

Upvotes: 0

Views: 2556

Answers (1)

windmaomao
windmaomao

Reputation: 7671

You create a store, and it's a variable holding some functionalities. So currently React actually doesn't know it, even going through the reducer and action.

React only knows something, in the function component case, a prop or a state.

  const Title = ({ passMeAProp }) => {
    const [createAState, dispatch ] = useState()
    ...
  }

If not, React doesn't know anything, because all the render is triggered by the dispatch (after the first render).

So store.dispatch does resolve the store data, but someone needs to notify the React this is done, thus useSelctor.

FYI, most of the store related stuff has nothing to do with React, thus the name react-redux. This is from the documentation.

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
  decrement,
  increment,
  incrementByAmount,
  incrementAsync,
  selectCount,
} from './counterSlice'
import styles from './Counter.module.css'

export function Counter() {
  const count = useSelector(selectCount)
  const dispatch = useDispatch()

  return (
    <div>
      <div className={styles.row}>
        <button
          className={styles.button}
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          +
        </button>
        <span className={styles.value}>{count}</span>
        <button
          className={styles.button}
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          -
        </button>
      </div>
      {/* omit additional rendering output here */}
    </div>
  )
}

Upvotes: 2

Related Questions