1

I just want to update state outside of component after server give me failed response. the project is react native .

After a lot of online search on website like this , I learn that i need to import my store and use dispatch method. but when i import storage and dispatch it, it give me this error: Property 'crypto' doesn't exist .

this is my feachService.js code:

import { URL } from 'react-native-url-polyfill';
 import  { store } from '../store/index'
 import { errorSliceActions } from '../store/slices/global/errorSlice'

export default (url, isGet) => {
    let headers = {
        Referer: new URL(url).origin,
    }
    headers['X-Requested-With'] = 'XMLHttpRequest'

    return fetch(
        url, 
        { 
            method: (isGet ? 'GET' : 'POST'), 
            headers: headers 
        })
        .then(function (res) {
            return res.json();
        })
        .then(function (res) 
        {
            if(res && res.isSuccess == false && res.message) {
                store.dispatch(errorSliceActions.add(res.message));
            } 
            return {json: function() { return res; }};
        })
        .catch(function (error) { console.log(error.message); })
        
};

this is my storage js file:

import { configureStore } from '@reduxjs/toolkit';

import errorSliceReducer from './slices/global/errorSlice';

export const store = configureStore({
  reducer: {
    errorSlice: errorSliceReducer
  }
});

this is my error slice.js file:

import { createSlice } from "@reduxjs/toolkit"

function uuidv4() {
    return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
      (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
    );
  }

const errorSlice = createSlice({
    name: "errorSlice",
    initialState: {
        errors: [
        ]
    },
    reducers: 
    { 
        add: (state, action) => {
            const newItem = {
                id: uuidv4(),
                message: action.payload
            };
            return [...state, newItem];
        },
        remove: (state, action) => {
            return { errors: state.errors.filter(function(item) { return item.id != action.payload; }) }
        }
    }
  })
  
  export const errorSliceActions = errorSlice.actions;
  
  export default errorSlice.reducer

and this is my code for executing fetch request

async function loadInfo (inputSearch, inputPage) {
      if(config.dataurl) {
        console.log(inputSearch);
        setIsLoading(true);
        const hasQuestionMark = config.dataurl.indexOf('?') > 0;
        let targetUrl = '/test/test' +  config.dataurl + (!hasQuestionMark ? '?' : '&');
        targetUrl += 'page=' + inputPage;
        targetUrl += '&search=' + inputSearch;
        console.log(targetUrl);
        const response = await feachService(appJSon.baseUrl + targetUrl , true);
        const responseData = await response.json();
        setIsLoading(false);
        if(responseData.pagination)
          setPagination(responseData.pagination);
        if(!responseData.results)
          setItems([]);
        else 
          setItems(responseData.results);
      }
    }
 useEffect(() => {
        loadInfo('', 1).catch(function (error) { console.log(error.message); });
    }, [])

what am i doing wrong ?

setad bime
  • 11
  • 2

0 Answers0