I've been trying hard to wrap my head around this concept but with no luck.
The official React tutorial is really good but for me it's way too complex and just simply a little bit too hard.

I'm trying to understand Redux and so far I can create actions, reducers, I can dispatch an action and then see how the store state changes after dispatching it. I also managed to understand `connect` of react-redux and it works perfectly well and I'm able to trigger dispatches from any place in my app. So I think I almost got it figured out. Almost, because here's the elephant in the room - I dispatch the action, I see the Redux state change but HOW DO I CHANGE THE UI?

For example I have `text` object in my initial state with value `Initial text` and once a button is clicked I want to change the text to `Clicked text` and DISPLAY the text somewhere in the UI (let's say on the button).

How do I "access" the Redux state in React and how do I dynamicaly change it?

It seems to be very simple without React, e.g..: <https://jsfiddle.net/loktar/v1kvcjbu/> - `render` function handles everything, I understand everything that happens here.

But on the other side "todo" from official React+Redux tutorial looks like this: <https://redux.js.org/docs/basics/ExampleTodoList.html> , it's so sophisticated I have no idea where to look.

The `Add Todo` button submits a form that dispatches `dispatch(addTodo(input.value))` action. The action itself does nothing just increases the ID and passes the text to the store and the reducer just returns the new state. Then how the todo is being rendered on the page? Where? I'm lost at this point. Maybe there are simpler tutorials, I'd love to have an one-button Redux tutorial it still can be complicated with multiple layers of components :(

I suspect the magic happens in TodoList.js as they're mapping over something there but still I have no idea where todos come from there, and what it has to do with Redux (there's no simple reducer/action/dispatch in that file).

Thanks for any help!