Error react_context_hook__WEBPACK_IMPORTED_MODULE_12__.store.get is not a function

[yelnyafacee]

I ma getting Error react_context_hook__WEBPACK_IMPORTED_MODULE_12__.store.get is not a function from store.get('something'),

import { useStore, withStore } from 'react-context-hook';
import {store} from 'react-context-hook' //import the raw store


function Category() {

   .....

  if(store.get('something')) {
  
     ....
  
  }

}

can you show an example of how the store.get('something') is used? how do I get one of the store value with a key?

[Spyna]

import` { withStore} from 'react-context-hook'

export default withStore(App)

I think you forgot to use this command in the app.

Why do you have to access the store that way? I recommend to use the hooks provided by this library itself

[yelnyafacee]

hi, I am using the store hook like:

    const [
        getSearchData,
        setGetSearchData,
        deleteGetSearchData
    ] = useStore('getSearchData', null);


setGetSearchData(getSearchDataFunc);

async function getSearchDataFunc(pageNumber = 1, params = {}) {

  .....

}

but when I called getSearchData function in a child component like:

getSearchData(1, { 'album_type' : '' });

getSearchDataFunc get called but all the parameters (1, { 'album_type' : '' }) failed to pass through into the function

[Spyna]

Did you wrap the root component in export default withStore(App) ?

[yelnyafacee]

If I wrap only the top most component with withStore(xxx) alone, somehow the useStore data failed to pass to the child components TypeError: Cannot convert undefined or null to object" ( searchData.album_types ), but if I also wrap the child component with withStore() ( export default withStore(Selected_AlbumType); ) the data can be accessed, is this a bug?

child component ( Selected_AlbumType ):

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { useStore, withStore, store } from 'react-context-hook';
import { urlGetParam, urlHasParam } from '../../../../utils/Helpers.js';


function Selected_AlbumType() {

    // Declare Global Store State:
    // const [searchData] = useStore('searchData', null);
    // const [getSearchData] = useStore('getSearchData', null);
    // const [album_type] = useStore('album_type', null);

    const [
        searchData,
        setSearchData,
        deleteSearchData
    ] = useStore('searchData', []); 

    const [
        getSearchData,
        setGetSearchData,
        deleteGetSearchData
    ] = useStore('getSearchData', null);

    const [
        query_album_type,
        setQuery_album_type,
        deleteQuery_album_type
    ] = useStore('query_album_type', null);



    /*
    |--------------------------------------------------------------------------
    | Handle : Close Click
    |--------------------------------------------------------------------------
    */
    const handleCloseClick = (index) => {
        getSearchData(1, {}, { 'album_type' : '' }, true);
    }

    /*
    |--------------------------------------------------------------------------
    | JSX : Logic
    |--------------------------------------------------------------------------
    */
    let album_types = {};

    // Search Data Exist
    if(searchData) {

        // Get Album Types from Search Data
        album_types = searchData.album_types;

    }

    const result_jsx = [];

    // Selected > Album Size Exist
    if(urlHasParam('album_type') || (query_album_type)) {

        // Loop Album Size(s)
        for (const [index, [key, value]] of Object.entries(album_types)) {

            // Album Size == Selected Params > Album Size
            if (key === urlGetParam('album_type') || (key === query_album_type)) {

                // Push > JSX
                result_jsx.push(

                    <div key={'album_type'}>

                        <h3 className="section-sidebar-filter-name">Album Type</h3>

                        <div className="section-sidebar-filter-box c-row-gut-1">

                                    <span className="section-sidebar-filter-icon c-textual-button c-link--white" onClick={(e) => handleCloseClick(key)}>

                                      <svg style={{width: '20px', height: '20px', position: 'relative'}}>
                                        <use xlinkHref='/assets/icons/master.svg?v=130#close' style={{fill: 'currentcolor'}} />
                                      </svg>

                                    </span>

                            <h4 className="section-sidebar-filter-selected">{value}</h4>

                        </div>

                    </div>
                )

            }

        }

    }


    /*
    |--------------------------------------------------------------------------
    | Return
    |--------------------------------------------------------------------------
    */
    return result_jsx;

}

// export default Selected_AlbumType;
export default withStore(Selected_AlbumType);

[Spyna]

Ok, if you use withStore as in the example below, using the config and the initial state, you can enable the debug in the console of the browser. To see what is going on in the store. Furthermore, you can configure the initialValue value of the store, in order to set the base initial value of the state. If you do so, maybe you can resolve the null and undefined problems. Keep in mind that if you don't set any initial value, the state of the store will always be an empty object.

const storeConfig = {
 logging: true
}
const initialState = {};

export default withStore(App, initialState, storeConfig)