redux-toolkit과 함께 notistick / (모든 스낵바)를 어떻게 사용하고 반응 할 수 있습니까?

0xSHA1001

스낵바를 어디에 어떻게 작성해야하는지 제안하고 싶으므로 데이터를 가져 오거나 가져 오는 동안 오류가 발생하면 알림을 제공해야합니다. 동일한 예가 많이 있지만 폴더 구조 때문에 제 경우는 다릅니다. 예 : src / api.js

  const API = axios.create({
  baseURL: `/`,
});
 export async function fetchData(data) {
  try {
    const res = await API.get(`/endpoint`);
    return res.data;
  } catch (err) {
    throw err;
  }
}

src / slice.js

import * as REQUESTS from "./api.js";
const initialState = {
  data: []
}

export const dataSlice= createSlice({
  name: "dataSlice",
  initialState,
  reducers: {
    setData(state,action) {
      const { data } = action.payload;
      state.data = data.map((item) => item);
    },
}
})

export const { setData} = dataSlice.actions

//THUNK
export const fetchData= () => async (dispatch) => {
  try {
    
    const { Data,Err } = await REQUESTS.fetchData();
     //If no err snackbar/toast should show fetched successfully.
     // I called snackbar here but snackbar library gives an error, says it should called from within a component.

  } catch (error) {
    console.log(error);
  }
};

src / app.jsx

 //USING USE SELECTION GET DATA FROM STORE
const displayData= props => (
    <h1>{data}</h1>
)

이제 스낵바를 어디에서 어떻게 가져 와서 서버에서 상태를 가져올 수 있습니까? 이것은 내 프로젝트의 모형입니다.

노동

notistack 문서redux 구현 예제대한 링크가 있습니다 . 보세요.

짧은 요약:

  • 당신은 당신의 액션 크리에이터에게 파견 될 당신 만의 액션 크리에이터를 만들어야합니다 fetchData. 이 액션 생성자는 ENQUEUE_SNACKBAR알림을 표시하는 데 필요한 모든 정보와 함께 액션 유형 전달합니다 (예시의 actions.js 참조).
  • 감속기는이 알림을 배열에 저장하여 동시에 여러 알림이 올 수 있도록합니다 (예제에서는 reducer.js 참조).
  • 저장된 알림을 표시하기위한 새 구성 요소를 만들어야합니다 (예에서 Notifier.js 참조). 이 구성 요소에서는 enqueueSnackbarnotistack 에서 자신 호출합니다 . 또한 REMOVE_SNACKBARnotistack onExited핸들러 의 redux 저장소에서 알림을 제거하기위한 유형의 작업을 전달하는 것을 잊지 마십시오 (예를 들어 Notifier.js도 참조하십시오).

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

그놈과 함께 Awesome WM을 어떻게 사용할 수 있습니까?

분류에서Dev

Gon gem과 함께 Jbuilder 내에서 Rails 도우미를 어떻게 사용할 수 있습니까?

분류에서Dev

Ext JS Classic 툴킷과 함께 Froala HTML 편집기를 어떻게 사용할 수 있습니까?

분류에서Dev

`add --patch` 등과 함께 내 자신의 diff 도구를 어떻게 사용할 수 있습니까?

분류에서Dev

아도니스와 함께 nginx를 어떻게 사용할 수 있습니까?

분류에서Dev

ForEach 목록과 함께 RandomAccessCollection을 어떻게 사용할 수 있습니까?

분류에서Dev

루비 온 레일. 관련된 할일 항목과 함께 모든 할일 목록을 표시하고 싶습니다. 어떻게 할 수 있습니까?

분류에서Dev

`paste0`과 함께`I ()`를 어떻게 사용할 수 있습니까?

분류에서Dev

어떻게 든 .setMicrosecondPosition ()을 라인과 함께 사용할 수 있습니까 아니면 클립으로 만 할 수 있습니까?

분류에서Dev

discord.py와 함께 aiohttp를 사용하여 API 응답의 모든 페이지를 어떻게 읽을 수 있습니까?

분류에서Dev

반응 후크와 함께 Mutex를 어떻게 사용할 수 있습니까?

분류에서Dev

일반 레코드 및 테이블 유형과 함께 'InsertQuery'를 어떻게 사용할 수 있습니까?

분류에서Dev

std :: function과 함께 다형성을 어떻게 사용할 수 있습니까?

분류에서Dev

ipv6 기반 루프백에 :: 1과 함께 curl을 어떻게 사용할 수 있습니까?

분류에서Dev

조인과 함께 EF Where () 절에서 식 트리를 어떻게 사용할 수 있습니까?

분류에서Dev

Authorize === Administrator를 사용하여 배열의 모든 요소를 어떻게 반환 할 수 있습니까?

분류에서Dev

express.static과 함께 미들웨어를 어떻게 사용할 수 있습니까?

분류에서Dev

C #에서 루프를 사용하여 모든 ComboBoxes 컨트롤을 어떻게 반복 할 수 있습니까?

분류에서Dev

Netty에서 NioDatagramChannel과 함께 EventExecutorGroup을 어떻게 사용할 수 있습니까?

분류에서Dev

나중에 다른 쿼리와 함께 사용할 수있는 조인의 모든 필드를 어떻게 선택할 수 있습니까?

분류에서Dev

python과 leveldb로 모든 키를 어떻게 반복 할 수 있습니까?

분류에서Dev

apache camel과 함께 elasticsearch 2.2.1을 어떻게 사용할 수 있습니까?

분류에서Dev

메서드가 코딩 된 클래스와 같은 다른 반환 유형과 함께 정적 메서드를 어떻게 사용할 수 있습니까?

분류에서Dev

React 컴포넌트의 고유 한 인스턴스가 Flux를 사용하여 비동기 작업의 결과에 어떻게 반응 할 수 있습니까?

분류에서Dev

knex의 where 절과 함께 hasColumn을 어떻게 사용할 수 있습니까?

분류에서Dev

어떻게 든 출력과 함께 이메일의 호스트 이름을 인쇄 할 수 있습니까?

분류에서Dev

반응 형 디자인의 경우 모바일 사용자를위한 다른 header.php 파일을 어떻게 포함 할 수 있습니까?

분류에서Dev

x : String과 함께 x : Static을 어떻게 사용할 수 있습니까?

분류에서Dev

redux-observable과 함께 redux-batch-middleware를 사용할 수 있습니까?

Related 관련 기사

  1. 1

    그놈과 함께 Awesome WM을 어떻게 사용할 수 있습니까?

  2. 2

    Gon gem과 함께 Jbuilder 내에서 Rails 도우미를 어떻게 사용할 수 있습니까?

  3. 3

    Ext JS Classic 툴킷과 함께 Froala HTML 편집기를 어떻게 사용할 수 있습니까?

  4. 4

    `add --patch` 등과 함께 내 자신의 diff 도구를 어떻게 사용할 수 있습니까?

  5. 5

    아도니스와 함께 nginx를 어떻게 사용할 수 있습니까?

  6. 6

    ForEach 목록과 함께 RandomAccessCollection을 어떻게 사용할 수 있습니까?

  7. 7

    루비 온 레일. 관련된 할일 항목과 함께 모든 할일 목록을 표시하고 싶습니다. 어떻게 할 수 있습니까?

  8. 8

    `paste0`과 함께`I ()`를 어떻게 사용할 수 있습니까?

  9. 9

    어떻게 든 .setMicrosecondPosition ()을 라인과 함께 사용할 수 있습니까 아니면 클립으로 만 할 수 있습니까?

  10. 10

    discord.py와 함께 aiohttp를 사용하여 API 응답의 모든 페이지를 어떻게 읽을 수 있습니까?

  11. 11

    반응 후크와 함께 Mutex를 어떻게 사용할 수 있습니까?

  12. 12

    일반 레코드 및 테이블 유형과 함께 'InsertQuery'를 어떻게 사용할 수 있습니까?

  13. 13

    std :: function과 함께 다형성을 어떻게 사용할 수 있습니까?

  14. 14

    ipv6 기반 루프백에 :: 1과 함께 curl을 어떻게 사용할 수 있습니까?

  15. 15

    조인과 함께 EF Where () 절에서 식 트리를 어떻게 사용할 수 있습니까?

  16. 16

    Authorize === Administrator를 사용하여 배열의 모든 요소를 어떻게 반환 할 수 있습니까?

  17. 17

    express.static과 함께 미들웨어를 어떻게 사용할 수 있습니까?

  18. 18

    C #에서 루프를 사용하여 모든 ComboBoxes 컨트롤을 어떻게 반복 할 수 있습니까?

  19. 19

    Netty에서 NioDatagramChannel과 함께 EventExecutorGroup을 어떻게 사용할 수 있습니까?

  20. 20

    나중에 다른 쿼리와 함께 사용할 수있는 조인의 모든 필드를 어떻게 선택할 수 있습니까?

  21. 21

    python과 leveldb로 모든 키를 어떻게 반복 할 수 있습니까?

  22. 22

    apache camel과 함께 elasticsearch 2.2.1을 어떻게 사용할 수 있습니까?

  23. 23

    메서드가 코딩 된 클래스와 같은 다른 반환 유형과 함께 정적 메서드를 어떻게 사용할 수 있습니까?

  24. 24

    React 컴포넌트의 고유 한 인스턴스가 Flux를 사용하여 비동기 작업의 결과에 어떻게 반응 할 수 있습니까?

  25. 25

    knex의 where 절과 함께 hasColumn을 어떻게 사용할 수 있습니까?

  26. 26

    어떻게 든 출력과 함께 이메일의 호스트 이름을 인쇄 할 수 있습니까?

  27. 27

    반응 형 디자인의 경우 모바일 사용자를위한 다른 header.php 파일을 어떻게 포함 할 수 있습니까?

  28. 28

    x : String과 함께 x : Static을 어떻게 사용할 수 있습니까?

  29. 29

    redux-observable과 함께 redux-batch-middleware를 사용할 수 있습니까?

뜨겁다태그

보관