들어가면서

• 그동안 리액트네이티브와 zustand 가 연동되지 않아 아쉬움이 많던 와중에 모듈을 개발해준 분이 계셔서 공유하고자 글을 남깁니다.
• 소개글 + 제가 도입하면서 실수했던 부분들을 다른분들은 시간을 낭비하지 않길 바랍니다..

Plugin 소개

• 먼저 깃헙 레포지토리를 공유합니다. (npm은 올리지 않으심)
• Github repo: https://github.com/aylonmuramatsu/reactotron-zustand-plugin

연동 방법

• 먼저 설명에 나온대로 패키지부터 설치해 줍시다.

  yarn add https://github.com/aylonmuramatsu/reactotron-zustand-plugin.git
  
  or
  
  npm i https://github.com/aylonmuramatsu/reactotron-zustand-plugin.git --save

• 작업을 해주기 전에 우선 zustand store의 설정을 한대 모아 작업을 미리 해주면 편할 것 같아 다음과 같은 코드를 zustand store를 한데 모은 파일안에 생성해 주었습니다. (더 효율적인 방법이 있다면 추천 부탁드립니다. 제 실력이...)

  import { useToastStore } from './toast';
  import { useUserStore } from './user';
  
  const zustandStore = [
    { name: 'toast', zustand: useToastStore },
    { name: 'user', zustand: useUserStore },
  ];
  
  export { zustandStore };
  

• 그 후 RactrotronConfig.js 파일

import reactotronPluginZustand from 'reactotron-plugin-zustand';
import { zustandStore } from './src/store/store';


Reactotron.setAsyncStorageHandler(AsyncStorage) // AsyncStorage would either come from `react-native` or `@react-native-community/async-storage` depending on where you get it from
  .configure({
    name: 'Name Project',
  }) // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .use(
    //add this line 🙌
    reactotronZustand({
      stores: zustandStore,
    })
  ) // plus some custom made plugin.
  .connect(); // let's connect!

• 위와 같이 설정했을 시 Reacttotron에 나타난 화면
  

내가 실수한 부분

• 그 동안 내가 알고 있었던 부분에 실수가 있었던 것을 지금 알아차렸다..
• 실수 코드

import reactotronPluginZustand from 'reactotron-plugin-zustand';
import { zustandStore } from './src/store/store';

  Reactotron.setAsyncStorageHandler(AsyncStorage)
    .configure({
      name: 'FineMe',
    })
    .useReactNative({
      asyncStorage: { ignore: ['secret'] },
      networking: {
        ignoreUrls: /https:\/\/clients3.google.com\/generate_204/,
      },
    })
    .use(
      asyncStorage(),
      asyncStorage(),
      networking(),
      reactotronPluginZustand({ stores: zustandStore }),
    );

• 다른점은 여기서 내가 잘못알았던 부분은 use안에 연속적으로 넣어주었다는것...
• 위의 코드는 다음과 같이 작성해야합니다. (더 좋은 코드있으면 공유부탁드립니다. 실력이..)

import reactotronPluginZustand from 'reactotron-plugin-zustand';
import { zustandStore } from './src/store/store';

    Reactotron.setAsyncStorageHandler(AsyncStorage)
      .configure({
        name: 'FineMe',
      })
      .useReactNative({
        asyncStorage: { ignore: ['secret'] },
        networking: {
          ignoreUrls: /https:\/\/clients3.google.com\/generate_204/,
        },
      })
      .use(asyncStorage())
      .use(networking())
      .use(reactotronPluginZustand({ stores: zustandStore }));