redux-offline / redux-offline

Build Offline-First Apps for Web and React Native
https://redux-offline.github.io/redux-offline/
MIT License
6.15k stars 399 forks source link

Only works with the app open and then cut the connection. #294

Open rodrigofbm opened 5 years ago

rodrigofbm commented 5 years ago

Are you using offline() or createOffline() API?

offline()

Store config

Please paste your config below.

import { applyMiddleware, createStore, compose } from 'redux';
import { offline } from '@redux-offline/redux-offline';
import offlineConfig from '@redux-offline/redux-offline/lib/defaults';
import { Provider } from 'react-redux';
import ReduxThunk from 'redux-thunk';

import reducers from './Reducers'
import Routes from './Routes';

const store = createStore(
  reducers,
  {},
  compose(
    applyMiddleware(ReduxThunk),
    offline(offlineConfig)
  )
);

export default class App extends Component {
  render() {
    return (
      <Provider store={store} >
        <Routes />
      </Provider>
    );
  }
}

Offline config

//Reducer
case 'ADD_REPAIR_BOOK_SUCCESS':
case 'ADD_REPAIR_BOOK_COMMIT':
      return { ...state, addRepairBookResponse: payload };

//Action
export const getAllMaintenances = unidadeId => {

  return dispatch => {
    dispatch({
      type: 'ADD_REPAIR_BOOK_SUCCESS',
      payload: params,
      meta: {
        offline: {
          // the network action to execute:
          effect: { url: `${URL_API}/repairbook/${userId}/add`, method: 'POST', body: params, headers: { 'content-type': 'application/x-www-form-urlencoded' } },
          // action to dispatch when effect succeeds:
          commit: { type: 'ADD_REPAIR_BOOK_COMMIT', meta: params },
          // action to dispatch if network action fails permanently:
          rollback: { type: 'ADD_REPAIR_BOOK_ROLLBACK', meta: params }
        }
      }
    });
  };
}

Environment

React Native Environment Info:
    System:
      OS: Linux 4.15 Peppermint Eight
      CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
      Memory: 137.73 MB / 7.58 GB
      Shell: 4.3.48 - /bin/bash
    Binaries:
      Node: 8.15.0 - /usr/bin/node
      Yarn: 1.13.0 - /usr/bin/yarn
      npm: 6.4.1 - /usr/bin/npm
    SDKs:
      Android SDK:
        API Levels: 23, 27, 28
        Build Tools: 27.0.3, 28.0.3
    npmPackages:
      react: 16.6.3 => 16.6.3 
      react-native: 0.57.8 => 0.57.8 
    npmGlobalPackages:
      react-native-cli: 2.0.1

Steps to reproduce

-> Application is open on the form screen -> I cut the connection -> send to action -> close the app -> I turning on the connection -> Ok, the data is sent to the backend.

However, if I leave the app closed, I cut the connection, open the app, go to the form screen and do the rest of the steps, it does not send the data to the back end when I have a connection.

rodrigofbm commented 5 years ago

Configuring the store with redux-persist made it work. But now i'm facing a new problem.

https://i.imgur.com/4YlRFJn.png

Image subtitle: Red> the payload with the data saved offline. Black> the payload still being updated to an empty array.

How to stop it at the payload that I want (the "red" one)?

roshangm1 commented 5 years ago

Can you send the final content of your store (for offline config) ? @rodrigofbm

rodrigofbm commented 5 years ago

@roshangm1 Now I'm getting this like that:

return (dispatch, getState) => {
    let offlineData = getState().maintenanceReducer.getAllMainsResp;

   dispatch({
    type: GET_ALL_MAINTENANCES_SUCCESS,
    payload: offlineData,
    meta: {
      offline: {
        // the network action to execute:
        effect: { url, method: 'GET', headers: { 'content-type': 'application/x-www-form-urlencoded' } },
        // action to dispatch when effect succeeds:
        commit: { type: GET_ALL_MAINTENANCES_COMMIT, meta: offlineData }
      }
    }
  });
  };

It's working. But, Is that right?