What is Redux? 
Tags: react, redux, statemanagement
Published: 2021-04-09 20:37:31

# 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](https://redux.js.org/introduction/getting-started) 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](https://redux.js.org/introduction/getting-started) 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](https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367) 

# Store setup 
Here is a simple store setup:
```react
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:
```react
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 
```react
    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;
```react
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](https://redux.js.org/) has lots of great examples, tutorials, and best practices for beginners and can help you get set up fairly easily.