, 12 tweets, 4 min read
Ok; it's #redux time:

(code link at the end)

🔥 Learn Redux in 10 tweets - with React and hooks! 🎣 👇

Redux gives you a central place to put your state (data) for JavaScript apps

It's most often used with React (via react-redux)

This lets you access or change your state from ANY component in your tree

Your state lives in a central Redux store

That store is created with a function called a reducer

A reducer takes in a state and an action,
and returns the same or a NEW state

The store is given to your app using the `Provider` from react-redux

Use the provider to wrap your entire app, so that any component in your app can access the store

To get data out of the store, use the `useSelector` hook from react-redux

`selector` is just a fancy word for: "function that gets data from the store"

useSelector takes a callback, which gets the entire redux state, and you just pick out what you need for that component

Actions are plain JavaScript objects

All actions should have a 'type' key

They may also have additional keys (parameters)

Actions are not "called", but are "dispatched" to the reducers

The action `type` is what tells the reducer what to do (return a new state or the old one)

To change data in the store, first write your reducer:

Reducers are often written with switch/case statements, but don't have to be

They just have to take in an action and a state, and return a new state

It's important that reducers return a NEW state object (and not mutate the old one) so that your components will re-render when something changes

Don't _set_ state values in reducers - only ever return a new state object with changed values

To dispatch an action, use the `useDispatch` hook from react-redux

call useDispatch with an action object,

which will run through the reducers,

and will potentially change the state

All connected components (that call useSelector) will automatically get the new state

This is treated like props or state changing - useSelector will automatically detect changes and React will re-render the component


@codesandbox link:

That's the basics!

Redux can be used in much more complex ways, but the core is always:

1. dispatch an action to the store
2. which may or may not change the state via reducers
3. get that state with a selector
4. and changes will automatically re-render your app

Missing some Tweet in this thread? You can try to force a refresh.

Enjoying this thread?

Keep Current with Chris Achard

Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

Twitter may remove this content at anytime, convert it as a PDF, save and print for later use!

Try unrolling a thread yourself!

how to unroll video

1) Follow Thread Reader App on Twitter so you can easily mention us!

2) Go to a Twitter thread (series of Tweets by the same owner) and mention us with a keyword "unroll" @threadreaderapp unroll

You can practice here first or read more on our help page!

Follow Us on Twitter!

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just three indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!