react-redux dispatch action does not work on android but works on ios

user_6015670 0
Viewed 302

I have set up my store correctly and everything works perfectly fine on ios. But on android with the exact same code, the dispatch action has no effect, it does not populate my context with the value returned from my APi.

Since it is exactly the same code, I have been struggling to figure out what the issue could be.

I am using

    "react-redux": "^7.2.1",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "react-native": "0.66.4",

calling the action on app launch

const dispatch = useDispatch()
const trans = useSelector(state => state.translation);
useEffect(() => {
    fetchTranslations(dispatch)
  }, [])

reducer

import React from "react";

const initState = {};

const TranslationReducer = (state = initState, action) => {
  switch (action.type) {
    case 'FETCH_TRANSLATIONS':
      return action.payload.data
    default:
      return state;
  }
};

export default TranslationReducer

action

import { get } from '../api/query';

export function fetchTranslations(dispatch) {
  try {
    return (
      get('/api/v3/labels/mobile_app/')
      .then(res => {
        console.log('res', res)
        return res.json()
      })
      .then(response => {
        console.log('response', response)
        dispatch({
          type: 'FETCH_TRANSLATIONS',
          payload: response
        })
      })
    )
  } catch (e) {
    console.log('error', e)
  }
}

everything is correctly returned from the api, but dispatching the action does nothing to the state, it stays empty on android, but works fine on ios.

react-redux redux react-native reactjs android
1 Answers

Ok so after many days of searching, I went back into the setting up of redux-devtoools and changed a line in the initialisation of my store.

before

const store = createStore(
    reducers,
    {},
    composeWithDevTools(applyMiddleware(ReduxThunk))
  );

solution

  const store = createStore(
    reducers,
    {},
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

this is the line that seemed to be causing the error on Android only composeWithDevTools(applyMiddleware(ReduxThunk))

I have yet to understand why, but for everyone going through a similar error, I hope this will be useful.

user_60156700
Related