리덕스란?

Redux는 상태를 유지하고 중앙 집중화하기 위한 JavaScript 라이브러리입니다.

상태는 무엇입니까?

간단하게 유지하기 위해 State는 우리가 저장하고 업데이트하는 데이터입니다.

리덕스 흐름

기억해야 할 첫 번째 사항 중 하나는 스토어, 리듀서 및 작업이 모두 연결되어 Redux에서 데이터 흐름을 제어하는 ​​데 도움이 되는 기능이라는 것입니다.

가게

저희 가게는 감속기를 도입하고 있습니다.

Redux devtools를 사용하여 매장의 상태와 전달된 각 작업을 볼 수 있습니다.
상태를 확인하려면 브라우저용 redux devtools 확장을 다운로드해야 합니다.

우리 스토어에서 redux devtools 확장에 대한 대안으로. ComposewithDevTools에 대한 링크를 게시했습니다. 우리 가게의 redux devtools 라인 대신 사용할 수 있습니다. 자세한 내용은 섹션 1.3을 확인하십시오.
ComposeWithDevTools

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from "redux";
import Reducer from "./reducers/Reducer";
import App from "./App";

const store = createStore(
  postsReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

ReactDOM.render(
  <App store={store} />,
  document.getElementById("root")
);

감속기

리듀서는 초기 상태를 빈 배열로 설정하고 작업을 수행합니다.

if, else 문과 같은 switch/case 문이 있습니다. 우리의 상태는 업데이트됩니다
이 조건을 기반으로 switch/case 문에서 설정했습니다.

그런 다음 업데이트된 상태를 반환합니다. 우리는 원래 상태를 변경하지 않습니다. 감속기의 상태만 업데이트합니다

.

우리는 항상 기본 반환 상태를 설정합니다.

export const postsReducer = (state = [], action) => {
    switch(action.type){
        case 'FETCH_POSTS':
            return [...state, action.payload]
            default:
                return state 
    }
}

행위

우리의 작업은 비동기 호출을 만드는 곳입니다.

그들은 디스패치를 ​​인수로 받아들입니다.

가져오기는 끝점에서 정보를 검색하고 약속을 반환합니다.

그런 다음 응답을 가져와 json(JavaScript Object Notation)으로 변환합니다.

우리는 그것을 받아 페이로드를 입력하고 반환하도록 디스패치합니다.
FETCH_POSTS의 디스패치 유형을 살펴보면 감속기의 switch/case 문에서 우리의 경우와 일치하는 것을 볼 수 있습니다.

export const fetchPosts = () => {
    return (dispatch) => {
        fetch('endpoint')
        .then(resp => resp.json())
        .then(posts => dispatch({ type: 'FETCH_POSTS', payload: posts}))
    }
}

이것은 Redux 흐름의 간단한 예일 뿐입니다. 이것이 Redux의 세계로 가는 좋은 출발점이 되기를 바랍니다.

해피코딩 🧑🏾‍💻👩🏾‍💻👨🏻‍💻👩‍💻