CODEWITHSUNDEEP
reactjsreduxreact-redux
Jesse Sainz
Jesse Sainz

Reputation: 141

react-redux: dispatch action from reducer

I'd like to dispatch an action from the BuildingComponent's reducer function to affect the state of the InfoDrawer's state.

I know that this is not possible in redux, but I can't think of an alternative. Can anyone give me any suggestions/recommendations?

Thanks ahead of time. Any help is appreciated.

BuildingComponent

//BuildingsState initial state
let initialState = {
  hasHighlight: false,
  buildings: [],
  visible: false,
}

// BuildingsState reducer
export function BuildingsState(state = initialState, action) {

  if (action.type === 'BUILDING_TOGGLE') {

    if(state.hasHighlight && state.visible) {

      // I WANT TO DISPATCH AN ACTION HERE
      // dispatch({ type: "ResetPOIs" })

    } else {
      return {
        ...state,
        visible: !state.visible
      }
    }
  }

  ...

}

InfoDrawerComponent

//initial InfoDrawer State
const initialState = {
  open: false,
  textToDisplay: "",
  link: "",
}

//InfoDrawer reducer
export function InfoDrawerState ( state = initialState, action ) {

  if (action.type === "ResetPOIs") {
    return { textToDisplay: "", link: "", open: false };
  }

  ...

}

Here is how my state is laid out

state = {

  BuildingsState: {
    hasHighlight: false,
    buildings: [],
    visible: false
  }

  InfoDrawerState: {
    textToDisplay: "",
    link: "",
    open: false
  }

  ...

}

Upvotes: 1

Views: 6183

Answers (3)

Matt H
Matt H

Reputation: 1971

What I have done in the past is to use redux-thunk (https://github.com/reduxjs/redux-thunk) and dispatch actions from my thunks. The thunks are evaluated synchronously so you can easily get the state before and after the original action is dispatched. For example:

export const toggleBuilding = () => {
    return (dispatch, getState) => {
        dispatch({type: 'BUILDING_TOGGLE'});

        let {hasHighlight, visible} = getState();

        if(hasHighlight && visible) {
            //dispatch more stuff
        }
    }
};

Another alternative is to set up a subscription to your redux store that check for when hasHighlight and visible are set to true. You can do this from a component using connect(), or a direct subscription.

Upvotes: 6

duc mai
duc mai

Reputation: 1422

you can create a middleware that listen on actiontype you want to interact with or you can use redux observable https://redux-observable.js.org/

Upvotes: 0

markerikson
markerikson

Reputation: 67469

I would suggest having the infoDrawer reducer listen to the same action type. If necessary, have the logic that dispatches the action put the additional info from the buildings state into the action object. See the Redux FAQ entry on sharing state between reducers for more info.

Upvotes: 1

Related Questions