2

New hooks have been released with Redux version 7.1.0. I don't understand how to use these hooks in practice. Can someone give an example of how to use these hooks?

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
  • 4
    What about oficial documentation? https://react-redux.js.org/next/api/hooks That seems nice. :) On first look for most cases u will only need useSelector as a replace for mapStateToProps and useDispatch for replace mapDispatchToProps. – Pavel Kratochvil Jul 25 '19 at 09:16
  • 2
    @PavelKratochvil How do I understand He wants to see examples of how to use them?For me,official documentation there is no normal example. –  Jul 25 '19 at 09:34
  • So the next question which comes to my mind is: What is "normal" example? I can see example which show what is that hook doing and how to use it. What is wrong with that.? – Pavel Kratochvil Jul 25 '19 at 10:20
  • If you feel the docs are insufficient, please file an issue. – markerikson Jul 25 '19 at 15:26
  • 3
    @PavelKratochvil A good example is an example in practice.First, there is an explanation followed by practical use. [Watch it](https://www.w3schools.com/js/js_let.asp) –  Jul 30 '19 at 13:30
  • @Brigita-Wasi This conversation seems a bit offtopic. So we can agree to disagree. Or if you want to continue in this conversation don't hesitate to contact me. I can argue my point of view. – Pavel Kratochvil Jul 30 '19 at 13:48
  • 17
    @markerikson It will be difficult for beginners to understand redux hooks. I would add practical examples. –  Jul 30 '19 at 13:51
  • 2
    @Brigita-Wasi I'm from these newbies, you said everything correctly –  Jul 30 '19 at 14:17

1 Answers1

3

Please see sample.

  • useSelector is like mapStateToProps, you select properties from store and component is updated when store is changed

  • useDispatch is just returning dispatch. It like calling connect() with empty second argument.

  • useStore is used to retrieve store. But such store access can only be used for store manipulation, like reducer replacement. When store is changed, component which access store this way is not updated.

    Click Check2 button in example above and check2 is not checged untill you click 'update me' button

Fyodor Yemelyanenko
  • 11,264
  • 1
  • 30
  • 38
  • and why here need toString()?without this in any way.?when I removed toString(), it turned out that check1 is not visible.[link](https://codesandbox.io/s/react-redux-hooks-hpbut) –  Jul 26 '19 at 21:00
  • `toString()` is required to show value of `check1` and `check2` as they are boolean. It is only for rendering – Fyodor Yemelyanenko Jul 26 '19 at 21:22
  • 5
    on your examples, change this part of the code ` Counter: {counter.toString()}`. –  Jul 26 '19 at 21:51
  • 2
    @Fyodor I agree with Tigran the Great. Why did you write so ` Counter: {counter.toString()}`,could just ` Counter: {counter}`. –  Jul 30 '19 at 14:03
  • Yes, sure. `toString()` is not needed with `counter`. Removed it. – Fyodor Yemelyanenko Jul 30 '19 at 21:20