Connecting your React app to Redux

Part 2

Last week I covered the initial setup process for connecting your React app to Redux with some packages, and their components, wrapping our app, and creating, and connecting to, our store.

This week I’ll be covering the following, and including screenshots from my weather station project so you can see it all in action:

1. Reducers
2. Actions
3. Dispatch

So let’s get started!

First off, I ended up needing a few additional packages to get things working correctly for my project: { thunk} from ‘redux-thunk’, applyMiddlware from ‘redux’, and { composeWithDevTools } from ‘redux-devtools-extension’. This also required that my store method be updated to the following:

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddlware(thunk))
)

I also feel that it’s important to have a basic flow of our application to update our state:

action => reducer => updated state

First, our reducer. Our reducer will essentially tell our program what to do based on the action.type that we specify in our action. It takes in our action, and our current state, and then reduces this combination into one value.

An important thing to remember about our reducers is that it is they are pure functions. Meaning they have no side effects; they do not have any effect outside of the function & they only return a value.

const changeState = (state, action) => {
 switch(action.type){
 case ‘FETCH_DATA’:
 return{
 …state,
 dataToUpdate: […state.dataToUpdate]
 }
 default:
 return state
 }
}

We can also pass an initial state to our reducer!

const changeState = (state = {data: []}, action) => {…}

Next up, our action! We must send an action to our reducer when we want to update our data. An action is a set of strict instructions that we create the Redux will use to manage out to update our data.

action = {
 type: ‘FETCH_DATA’,
 newData: {key1: value1}
}

Actions are just plain old JavaScript objects. They are also made available to components; any component we connect to the store will be able to modify the state using an action we’ve defined.

Now let’s encapsulate the steps of reassigning our state to the return value of our reducer, in a function so that we can just call the function & it will keep track of our changes: enter dispatch!

We’ll look at this through the lens of updating a counter held in our state.

let state = {count: 0}
const changeState = (state, action) => {
 switch(action.type){
 case ‘INCREASE_COUNT’:
 return{
 count: state.count + 1
 }
 default:
 return state
 }
}
const dispatch = (action) => {
 state = changeState(state,action)
 return state
}
dispatch({type: ‘INCREASE_COUNT’})

In the above snippet, we start by declaring our state to equal an object, then we define our reducer and our dispatch. Then finally we call our dispatch and pass in our action! This in turn calls our changeState reducer and passes the action object to it, which assigns our state according to the case statement that matches our action.type!

Next time, I’ll cover mapStateToProps and mapDispatchToProps so we can get these pieces connected to the components & state we want to update!