Sending error message from reducer to user

Question

I'm new to React and Redux and I'm trying to write a simple application where a person can submit a URL for an image and it will show up on the page. Note that there is no backend to the application as of yet.

export const addImage = (url) => {
    return {
        type: ADD_IMAGE,
        key: Guid.create().toString(),
        payload: url
    }
}

Adding an image creates an action of type ADD_IMAGE and my reducer updates the state consequently. However I also check if the URL is already in the list.

switch (action.type) {
    case ADD_IMAGE:
    if (state.find(image => image.url === action.payload)) {
        return state;
    } else {
        return(
            [
                ...state,
                {key: action.key, url: action.payload}
            ]
        );
    }
    break;
    default:
}

The problem is that when I deny a post because the URL is already in the state I also want to convey that message to the user by showing it in a div next to the form. From what I've read I think I'm not supposed to try to access React state from reducers (if that is even possible) and... well.. I'm just stuck. I've been trying to find a simple guide on how to do this but I find nothing I can quite understand. After adding a database I guess I will have to do this as part of the async process but as I have it now I guess there should be some kind of simple solution.

Answer 1

You are starting to introduce logic into your reducer and this will inevitably lead to situation where you need to process some state outside of the reducer's scope.

The solution is to transfer your reducer logic into a thunk using a middleware package such redux-thunk (or similar package). This allows you to treat special kinds of actions as functions which means you can extend a plain action with specific action-related logic. The example you give of needing to dispatch an error action under certain conditions is an excellent use-case for redux-thunk.

Below is a example of how you might pull the logic out of your reducer into a thunk. You should note that, unlike reducers, thunks explicitly support fetching state and dispatching subsequent actions via the getState and dispatch functions.

Thunk example

export const addImage = (url) => {
  return (dispatch, getState) => {
    const key = Guid.create().toString()
    dispatch({
      type: ADD_IMAGE,
      key,
      payload: url
    })
    const state = getState()

    // you would want to use a `selector` here to locate the existing image
    // within the state tree 

    const exists = selectors.images.exists(state, url)

    if (exists) {
      dispatch(actions.ERROR_IMAGE_EXISTS({key, url}))
    }
  }
}

A note on selectors

You will see that I am using a selector to determine if the image exists. In the same way that thunks are the place to put your dispatch logic, a selector is the place to put your state-traversal logic. They are used to return portions of the state-tree or provide simple state-utilities such as the exists function shown above. Packages are available to help, for example reselect.

Follow on questions from comments

1. Are selectors not a built-in thing in Redux?

   No they are not. Selectors are an idea that builds on top of redux and the concept exists as a place to put your state searching, caching, reading logic. This extracts the sometimes complex state traversal logic out of your thunks and components and into a nice tidy, structured collection of selectors.

2. Why use a selector instead of state.images.find(i => i.url === url)?

   If you use a selector package then you get far more benefit than just a good separation of concerns, you get a big performance improvement (see usage example below).

   Here are the headlines from the popular reselect package:

   • Selectors can compute derived data, allowing Redux to store the minimal possible state.
   • Selectors are efficient. A selector is not recomputed unless one of its arguments change.
   • Selectors are composable. They can be used as input to other selectors.

3. Why doesn't actions.ERROR_IMAGE_EXISTS(url) work for me

   Because I just made that up for the example. The point is that you can dispatch actions from within the thunk, how you declare or get access to the action is up to you. I tend to centralise all my shared actions into an actions object that I import.

Selector usage example

Here is an example from my real-life code that shows how I use selectors to passing portions of the state as props to a react component:

const mapStateToProps = (state) => ({
  model: services.model.selector.getSelected(state),
  build: services.build.selector.getLastBuild(state),
  recommendations: services.recommend.selector.getRecommendations(state)
})

Each of these selectors is finding the correct portion of the state tree and delivering it back ready for use. Nice and tidy, and if you use reselector, very efficient.