Redux allows you to deals with the complexity of data within your application. In ReactJS this might be some computational data or data from a third party, like an API.

What is Redux?

Redux is a state management tool, which enables to you to be able to handle multiple states of your application in one place. A state in a React application is an object which allows you to manipulate different types of data within the component.

Use Cases for Redux

• Multiple sources of data/API
• An application which requires many state changes between components

How Redux works

There are three main components when it comes to getting started with Redux. These include actions, reducers and the store.

Usually in a React application, the state lives within the component. When Redux is used within a React app, the state lives outside of the component.

Actions

Actions are objects which enable the the reducer to understand when to set the next state; through a signal to the store via an action, usually known as dispatching an action.

import { THE_TEST } from './constants'

export const theTest = (payload) => {
    return {
        type: THE_TEST,
        payload
    }
}

export const getTest = () => {
    return function(dispatch) {
        dispatch(theTest())
    }
}

Reducers

The state returns from the reducers. In Redux state cannot be changed unlike within a component which can be changed with setState. The reducer is a function which takes in the state and action.

//src/reducers/testReducer.js
export default(state = {}, action => {
    switch(action.type) {
        case 'THE_TEST':
            return {
                ...state,
                test: action.payload
            }
        default:
            return state
    }
})

//src/reducers/rootReducer.js
import { combineReducers } from 'redux'
import testReducer from './testReducer'

export default combineReducers({
 testReducer
});

The Store

This is where all of the reducers are stored. The state of the application lives inside the store.

//src/store.js
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import rootReducer from './reducers/rootReducer'

export default function configureStore() {
 return createStore(
  rootReducer,
   applyMiddleware(thunk)
 )
}

Integrating Redux Within a Component

Once the actions, reducers and store have been set up, the following code will allow you to utilise Redux within components.

//src/components/testComponent.js
import { getTest } from '../actions/testAction'
import { connect } from 'react-redux'

const mapStateToProps = state => ({
  ...state
 })

const mapDispatchToProps = dispatch => ({
  getTest: () => getTest(testAction())
})

class testComponent extends Component {
  simpleTest = (event) => {
    this.props.getTest();
   }
  render() {
    return (
      <button onClick={simpleTest}> Test </button>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(testComponent);