Preserve boolean data using AsyncStorage within redux for efficient data storage

Question

Preserve boolean data using AsyncStorage within redux for efficient data storage

When I click a button, I want to toggle the state between "true" and "false" and save it using AsyncStorage in a React Native app with Redux. Can someone review my code and help me correct it if needed?

import { AsyncStorage } from "react-native";
import {
  START_TOOLTIP_BUDGET,
  STOP_TOOLTIP_BUDGET
} from "../actions/ActionTypes";

const INIT_STATE = true;
export default (state = INIT_STATE, action) => {
  switch (action.type) {
    case START_TOOLTIP_BUDGET:
      AsyncStorage.setItem("INIT_STATE", JSON.stringify(true));
      return INIT_STATE;

    case STOP_TOOLTIP_BUDGET:
      AsyncStorage.setItem("INIT_STATE", JSON.stringify(false));
      return INIT_STATE;
    default:
      return state;
  }
};

javascript java android ios react-native

Answer 1

Answer №1

Achieving correct results is possible, but ensure that when you return INIT_STATE, it returns true or false in order to access the current data for your class. Otherwise, you will always receive a true response.

export default (state = INIT_STATE, action) => {
  switch (action.type) {
    case START_TOOLTIP_BUDGET:
      AsyncStorage.setItem("INIT_STATE", JSON.stringify(true));
      return true;

    case STOP_TOOLTIP_BUDGET:
      AsyncStorage.setItem("INIT_STATE", JSON.stringify(false));
      return false;
    default:
      return state;
  }
};

You can then retrieve this information from the class that initiated the action, and also access the AsyncStorage item:

AsyncStorage.getItem("INIT_STATE")
    .then(req => JSON.parse(req))
    .then(data => {
        if (data !== null) { 
          console.log(data); // true or false 
        }
    }).done();

Answer 2

Achieving correct results is possible, but ensure that when you return INIT_STATE, it returns true or false in order to access the current data for your class. Otherwise, you will always receive a true response.

export default (state = INIT_STATE, action) => {
  switch (action.type) {
    case START_TOOLTIP_BUDGET:
      AsyncStorage.setItem("INIT_STATE", JSON.stringify(true));
      return true;

    case STOP_TOOLTIP_BUDGET:
      AsyncStorage.setItem("INIT_STATE", JSON.stringify(false));
      return false;
    default:
      return state;
  }
};

You can then retrieve this information from the class that initiated the action, and also access the AsyncStorage item:

AsyncStorage.getItem("INIT_STATE")
    .then(req => JSON.parse(req))
    .then(data => {
        if (data !== null) { 
          console.log(data); // true or false 
        }
    }).done();

Preserve boolean data using AsyncStorage within redux for efficient data storage

Answer №1

Similar questions

Struggling to imitate RestTemplate using MockRestServiceServer, however, the body consistently appears to be null

Tips for refreshing jQuery to ensure it functions smoothly for subsequent tasks

Error Encountered During iOS Air Native Extension Compilation

Using Swift: A guide to establishing IBOutlets from a different controller

Halt the camera preview in the barcode scanning application

Mismatched MongoOperations 'id' selection resulting in a null value

IONIC 3 [ERROR] There was a problem encountered during the execution of cordova run android, resulting in an exit code of 1

Ways to customize background color for a particular date?

Jest is throwing an error message stating that it cannot read properties of undefined, specifically trying to read the value of '

Ways to eliminate project title from the URL

When attempting to access endpoints from other computers, the connection to Express.js is being refused

The property express.json() is not recognized

Can media queries be used to disable script tags in order to prevent them from downloading?

Leverage the power of jQuery to manipulate video tags

Is there a way to fix the close button on the menu so that it works more than once?

Error encountered: The Jquery-ui functionality ceases to operate upon the completion of content

Log4j generates a "target" directory containing a blank file named "camel-spring-redis-test.log" within it

table headers with interactive buttons for switching between various table views

The display of temporary headers - Nodemailer - AJAX

Update class name in React component based on state change