반응: Redux 및 localStorage

이번 주 내 React 모험에서 나는 Redux 및 react-redux을 사용하여 states를 지나가는 스파게티를 푸는 방법을 살펴보았습니다. .

로컬 스토리지 이익

2개의 구성 요소, 항목을 표시하고 삭제와 같은 일부 상호 작용을 제공하는 할 일 목록, 항목을 추가할 수 있는 항목 양식(일반적인 시나리오가 아님)이 있는 시나리오를 상상해 봅시다.

목록을 포함하는 상태와 소품을 사용하여 구성 요소에 전달할 수 있는 상태를 편집하는 일부 함수가 있는 래퍼 구성 요소를 만들 수 있습니다.

충분히 간단해 보이지만 이제 필터링된 목록인 다른 페이지가 있다고 가정해 보겠습니다. 완료된 것으로 표시된 항목만 표시한다고 가정해 보겠습니다. 원래 상태에 어떻게 액세스할 수 있습니까? 상태를 필요로 하는 모든 구성 요소에 전달할 수 있도록 상태를 더 높게 저장해야 합니다. 함수도 전달되어야 합니다. 데이터가 필요한 곳이 많을수록 이 접근 방식은 더 복잡해집니다.

그러나 Redux는 모든 구성 요소에서 액세스하거나 편집할 수 있는 저장소를 만듭니다. 앱의 일부 모호한 설정 패널에서 목록을 확인해야 합니까? 아무 문제 없습니다 그냥 가게에 가서 얻을. 더 간단하지 않습니까? Redux는 시작하기 전에 상당한 양의 코드를 가지고 있지만 솔직히 모든 것이 완료되면 상점에 새 항목과 기능을 추가하기가 쉽습니다.

보일러 플레이트

모든 보일러 플레이트를 치우고 각각 src 를 포함하는 index.js 에 3개의 폴더를 만듭니다. 이들은 reducers , store 및 actions 입니다.

감속기

여기에서 매장 뒤의 논리를 만듭니다. 각 상점 항목에 대한 파일이 필요합니다. 목록 저장소를 만들고 싶기 때문에 항목 추가 논리를 보여 드리겠습니다. 이 파일의 이름은 list.js입니다.

// We pass in a state, which is empty by default
// and an action which we will learn about in the 
// actions file
const listReducer = (state = {}, action) => {
  // Clone state object
  const newState = Object.assign({}, state);
  // Look for type set in the actions file
  // these types should be as unique as possible
  switch (action.type) {
    case "LISTITEM_ADD":
      // Generate random key and populate with default object.
      // Payload is set in the actions file
      newState[
        Math.random()
          .toString(36)
          .replace(/[^a-z]+/g, "")
      ] = {
        complete: false,
        label: action.payload
      };
      break;
    default:
      break;
  }

  // return the modified state
  return newState;
};

export default listReducer;

이제 인덱스 파일을 살펴보겠습니다. 인덱스 파일의 목적은 모든 감속기를 관리하기 쉬운 하나의 감속기로 병합하는 것입니다. Redux에는 바로 이러한 목적을 위해 combineReducers라는 함수가 있습니다.

import listReducer from "./list";
import { combineReducers } from "redux";

// The key of this object will be the name of the store
const rootReducers = combineReducers({ list: listReducer });

export default rootReducers;

가게

이것은 localStorage 마법이 일어나는 곳입니다. 이 두 가지 기능을 추가하기만 하면 세션 간에 모든 데이터를 저장할 수 있습니다.

import { createStore } from "redux";
import rootReducers from "../reducers";

// convert object to string and store in localStorage
function saveToLocalStorage(state) {
  try {
    const serialisedState = JSON.stringify(state);
    localStorage.setItem("persistantState", serialisedState);
  } catch (e) {
    console.warn(e);
  }
}

// load string from localStarage and convert into an Object
// invalid output must be undefined
function loadFromLocalStorage() {
  try {
    const serialisedState = localStorage.getItem("persistantState");
    if (serialisedState === null) return undefined;
    return JSON.parse(serialisedState);
  } catch (e) {
    console.warn(e);
    return undefined;
  }
}

// create our store from our rootReducers and use loadFromLocalStorage
// to overwrite any values that we already have saved
const store = createStore(rootReducers, loadFromLocalStorage());

// listen for store changes and use saveToLocalStorage to
// save them to localStorage
store.subscribe(() => saveToLocalStorage(store.getState()));

export default store;

데이터를 저장하지 않으려면 saveToLocalStorage 및 loadFromLocalStorage 기능을 제거해야 합니다. 또한 loadFromLocalStorage 및 전체 createStore 행에서 store.subscribe를 제거해야 합니다.

행위

이것은 우리가 "함수"를 저장할 곳입니다. 저는 함수라고 부르지만 매우 단순합니다. 이 함수는 단순히 유형과 페이로드가 있는 객체를 반환합니다. 페이로드는 우리가 전달하는 매개변수에 사용하는 단어일 뿐입니다.

export const addItem = payload => {
  return {
    type: "LISTITEM_ADD",
    payload
  };
};

공급자 사용

공급자는 react-redux에 의해 당사에 제공됩니다. React의 인덱스 파일에 넣은 래퍼 구성 요소입니다. 이렇게 보일 것입니다.

import React from "react";
import ReactDOM from "react-dom";
import store from "./store";
import { Provider } from "react-redux";

import App from "./App";

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

매장 이용

나는 이 기사의 상단에서 많은 상용구가 있었고 마침내 그것을 통과하고 마침내 상점을 사용할 수 있다고 말했습니다.

useSelector

useSelector는 redux-react가 저장소에서 데이터를 읽는 방법이며 사용이 매우 간단합니다. 당신은 그것을 가져와야하고 그렇게 사용할 수 있습니다.

import { useSelector } from "react-redux";

// As you see we're getting the whole state
// but we're only returning list which is the 
// name we gave it in the reducers file
const list = useSelector(state => state.list);

이제 원하는 대로 구성 요소에서 list를 사용할 수 있습니다.

useDispatch

useDispatch는 또 다른 redux-react 것입니다. 상점에 함수를 발송할 수 있습니다. 다시 말하지만 이전의 모든 보일러 플레이트가 무거운 작업을 수행하므로 사용이 매우 간단합니다. actions 및 useDispatch 에서 사용하려는 함수를 가져와야 합니다.

import { addItem } from "../actions";
import { useDispatch } from "react-redux";

// This stores the dispatch function for using in the component
const dispatch = useDispatch();

// we run the dispatch function containing the addItem function
// As you remember addItem takes a payload and returns an object
// It will now run the reducer
dispatch(addItem(value));

마무리 생각

일단 모든 상용구가 제거되면 구성 요소 전체에서 데이터 액세스를 사용하는 것이 훨씬 쉬워지고 프로젝트 진행에 정말 도움이 된다는 것을 알 수 있습니다. 또한 교차 세션 저장을 매우 쉽게 만드는 추가 이점이 있습니다!

이번 주에는 조금 길었지만 우리는 거기에 도달했습니다. 읽어 주셔서 감사합니다. 질문이나 수정 사항이 있으면 아래에 자유롭게 게시하십시오.

다시 한번 감사드립니다 🦄🦄💕❤️🧡💛💚🤓🧠