Hello There

This presentation aims to explain the basic concepts of React Redux as simply and as clearly as possible, both through theory and examples.

slide 1

Redux is a popular JavaScript library for managing the state of your application. It is very common and if you are working with React, chances are — you’ve already heard about it.

slide 2

Redux works by providing a centralized 'store', which holds all the states within the app. Each component in the app can access this store without having to pass props around in the component tree.

slide 3

Redux has 3 main parts: Actions Reducers Store

slide 4

slide 5

Store

The Store is where all the states are managed. It can be created in a single line:

          const store = createStore(myComponent);

        

slide 6

Actions

Some examples of actions:

          //action to add a todo item
          { type: 'ADD_TODO', text: 'This is a new todo' } 
          //action that pass a login payload
          { type: 'LOGIN', payload: { username: 'foo', password: 'bar' }}
        

slide 7

Reducers

Here's a simple example of a reducer function:

          //takes in the current state and action
          //updates the value based on the action's type

          function counterReducer(state = { value: 0 }, action) {
            
            switch (action.type) {
              case 'INCREASE':
                return { value: state.value + 1 }
              case 'DECREASE':
                return { value: state.value - 1 }
              default:
                return state
            }
          }
        

slide 8

If you’re on Windows, create the necessary files and folders manually and make sure your folder structure is the same as mine:

slide 9

Create & Initialize Store.

Some examples of actions:

          import { configureStore } from 'redux'
          export default configureStore({
            reducer: {} //add reducers here
          })
        

slide 10

Provide Store in React app.

In our index.js file, we import the Provider and our store.js like so:

          import store from './store'
          import { Provider } from 'react-redux'

          ReactDOM.render(
            
              
            ,
            document.getElementById('root')
          )
        

slide 11

Write Reducers and Actions.

In our index.js file, we import the Provider and our store.js like so:

Actions:

          // actions/index.js
          export const Increase = () => ({
            type: 'INCREASE'
          })
          
          export const Decrease = () => ({
            type: 'DECREASE'
          })
        

slide 12

Reducers

          // reducers/index.js
          export default (state = 0, action) => {
            switch (action.type) {
              case 'INCREASE':
                return state + 1
              case 'DECREASE':
                return state - 1
              default:
                return state
            }
          }
        

slide 13

Add Dispatch Functions in UI

          import { useSelector, useDispatch } from 'react-redux'
          import { decrease, increase } from './counterSlice'

          export function Counter() {
            const count = useSelector(state => state.counter.value)
            const dispatch = useDispatch()
          
            return (
              

                
                  Increase
                
                
{count}
                
                  Decrease
                
              
            )
          }
        

slide 14

Conclusion

Redux is a great option for developers who wants to reduce the amount of boilerplate code in Redux. It allows us to write cleaner and more readable code while keeping the Redux flow and pattern.

Thank you for your attention. I hope this presentation has helped you start understanding Redux and using it in your applications.

slide 15