What is Redux

Redux is a state management container for JavaScript Apps. This means that it can help you write apps that behave consistently. Redux can also run in different environments like client, server, and native.

Installation

redux.us.org recommends the redux toolkit to write Redux logic. The toolkit wraps around the Redux core and contains packages and functions that are essential for building a Redux app. See redux.us.org for more information on installing redux.

When to use Redux

If you have a small app and you don't have a lot of data that is changing then it probably doesn't make a lot of sense to use Redux in your app. On the contrary, if you do have a larger app with lots of changing or dynamic data then maybe that would be a good app to utilize Redux. Here are some instances it would make sense to use Redux.

• If you have a large quantity of data that changes over time
• If you want a 'single source of truth' for your state
• If keeping your state in a top-level component is not sufficient
• You need to see how the state is being updated over time
• The logic to update the state is complex

If you are not sure if you should use redux or not, you should check out this blog post by Dan Abramov

Store setup

Here is a simple store setup:

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import rootReducer from './reducers'
import App from './components/App'

const store = createStore(rootReducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Let's dissect this code a bit. First, we need to import { createStore } from 'redux' This gives us access to the createStore function and we pass our rootreducer to that function which returns a store object. We will also notice import { Provider } from 'react-redux' The <Provider> component makes the Redux store available to any nested components that may need access to the store. It's pretty typical for React apps that are using Redux to render the <Provider> component at the top level.

Redux Data Flow

When I was first learning how to implement Redux, this was one of the more confusing aspects of it. To understand and remember the data flow and how it works. Let's review it!

• An action gets dispatched when a user interacts with your app
• The reducer function is called with the current state and the dispatched action.
• The store will notify the view by executing their callback functions
• The view can retrieve an updated state and re-render In general, the Redux flow looks like this action -> reducer -> new state # Actions & Reducer Actions are the only source of information for the store. They are plain JavaScript objects and must have a type attribute. To make a change in the store you have to dispatch an action by using the store.dispatch() function. Here's an example action:

export function fetchDestinations() {
  return (dispatch) => {
   fetch("http://localhost:3000/api/v1/destinations")
    .then(response => response.json())
    .then(destinations => dispatch({
      type: 'FETCH_DESTINATIONS',
       payload: destinations
    }))
  }
}

You'll notice in this action we are calling type: 'FETCH_DESTINATIONS' This comes from our reducer. In my reducer I have

    switch(action.type){
    case 'FETCH_DESTINATIONS':
      return {action.payload}

So, our action dispatches the data to our reducer and then the reducer returns the new state. Here is a simple example of a reducer setup;

function counter(state, action) {
  if (typeof state === 'undefined') {
    state = 0 
  }

  if (action.type === 'INCREMENT') {
    return state + 1
  } else if (action.type === 'DECREMENT') {
    return state - 1
  } else {
    return state 
  }
}

Conclusion

In general, I think Redux is a great state management tool. At first, it can be a bit confusing but as with most things, the more you use it the easier it gets to understand. The official Rexux documentation has lots of great examples, tutorials, and best practices for beginners and can help you get set up fairly easily.