0

I've fetched a todo data from jsonplaceholder.typicode and I set up a action using redux fetching that data (I use thunk middleware). And I successfully get that data from jsonplaceholder to my component and I add a logic in reducer for toggling the todos:

//initState is { todos: [] }
case TOGGLE_TODO: 
  return {
    ...state,
    todos: state.todos.map(todo => {
      if (todo.id === action.payload) {
        return {
          ...todo, completed: !todo.completed
        }
      }
      return todo
    })
  }

But the problem is when I toggle a todo using checkbox, the 'line-through' style is blinking for some reason (it shows the strike in text but disappearing after I think .5 sec ) thats why I need a understanding why it happens, Is it because I fetched it in the internet? Or somethings wrong it the logic? Sorry for my noob question.

Here's my Todo component:

const dispatch = useDispatch()
const strikeStyle = {
  textDecoration: todo.completed ? 'line-through' : ''
} 

const onChangeHandler = () => {
 dispatch(toggleTodo(todo.id))
}

...
<label>
    <input onChange={onChangeHandler} type='checkbox' />
    <p style={strikeStyle}>{todo.title}</p>
</label>
Zowy
  • 41
  • 7
  • 1
    You should share your CSS not necessarily your redux action. – lux Jul 22 '20 at 17:48
  • what? I cant get a little bit your sentence sir, Im afraid to misunderstand It, not my native language. Do you mean should I post also my css? – Zowy Jul 22 '20 at 17:54
  • And the HTML that is rendering this. How much debugging have you done? How often is this reducer being called? Are you calling TOGGLE_TODO before the call is finished and then calling it again when it's finished? – Ruan Mendes Jul 22 '20 at 17:54
  • @Zowy I'm not sure what wasn't clear in what lux said "You should share your CSS". If we don't show the HTML/CSS that are rendering this data, it's pretty hard to guess.. – Ruan Mendes Jul 22 '20 at 17:55
  • Ive already edited my post take a look. I dont have that much css btw, just a line-through property only. – Zowy Jul 22 '20 at 17:58
  • @JuanMendes It already works now! I just figured it out, I just got an idea when you said that Im I calling it before the finished and and then calling it again when it's finished. I'd just add only a bracket '[]' in my useEffect. Thanks sir! – Zowy Jul 22 '20 at 18:01
  • @Zowy Please write an answer explaining how you fixed your problem and update your answer to indicate what the problematic code was. StackOverflow is meant to help others with the same problem. – Ruan Mendes Jul 22 '20 at 18:04
  • Yes, I already add an answer. – Zowy Jul 22 '20 at 18:09

1 Answers1

0

I just add a bracket at my useEffect because If I didn't add a bracket, I think it continuing to fetch the data and keeping the default value of all the data thats why its blinking.

const dispatch = useDispatch()
const todos = useSelector(state => state.TodoReducer.todos)

useEffect(() => {
 dispatch(fetchTodoData())
}, [])

return (
  <div>
    {todos.map(todo => <Todo key={todo.id} todo={todo}/>)}
  </div>
Zowy
  • 41
  • 7
  • emplty bracket means that your effect will be executed only after component rendered. Without brackets this effect will be executed every time component updated – poltorin Jul 22 '20 at 18:12
  • Theres a lint if I put a empty bracket btw, "the linter is telling you that you're depending on external values that may change, when you set the dependencies as an empty array the effect will run just once when the component mounts" Heres the discussion https://github.com/facebook/create-react-app/issues/6903. Btw, my data are coming jsonplaceholder. – Zowy Jul 22 '20 at 18:20