Как использовать локальное хранилище с редуксом? - PullRequest
Новая
       29

Как использовать локальное хранилище с редуксом?

1 голос
/ 01 февраля 2020

Я пытаюсь создать клон Trello, используя ReactJS с основными c функциональными возможностями. Я использую Redux для управления состоянием. Проблема в том, что я не могу понять, как использовать localalstorage для хранения текста компонента карты.

Что я строю?

  • Основа c Клон Trello с 4 столбца с именами TODO, DOING, DONE, REJECTED.
  • Я могу добавить карты в любой из 4 столбцов.
  • Карты можно перемещать из любого места в любые столбцы, а также переставлять (используя response-beautiful-dnd)

В чем моя проблема? Так как я использую Redux, я не могу сохранить данные в моем локальном хранилище. Как мне подойти к этой проблеме?

Мой listReducer. js file 

import { CONSTANTS } from "../actions";

let listID = 2;
let cardID = 10;

const initialState = [
  {
    title: "TODO",
    id: `list-${0}`,
    cards: [
      {
        id: `card-${0}`,
        text: "this is a card"
      },
      {
        id: `card-${1}`,
        text: "this is the second card"
      }
    ]
  },
  {
    title: "DOING",
    id: `list-${1}`,
    cards: [
      {
        id: `card-${2}`,
        text: "doing card 1"
      },
      {
        id: `card-${3}`,
        text: "doing card 2"
      }
    ]
  },
  {
    title: "DONE",
    id: `list-${2}`,
    cards: [
      {
        id: `card-${4}`,
        text: "done this is a card"
      },
      {
        id: `card-${5}`,
        text: "done this is the second card"
      },
      {
        id: `card-${6}`,
        text: "done this is the second card"
      }
    ]
  },
  {
    title: "REJECTED",
    id: `list-${3}`,
    cards: [
      {
        id: `card-${7}`,
        text: "rejected done this is a card"
      },
      {
        id: `card-${8}`,
        text: "rejected done this is the second card"
      },
      {
        id: `card-${9}`,
        text: "rejected done this is the second card"
      }
    ]
  }
];

const listReducer = (state = initialState, action) => {
  switch (action.type) {
    case CONSTANTS.ADD_LIST:
      const newList = {
        title: action.payload.text, ///here
        cards: [],
        id: `list-${listID}`
      };
      listID += 1;
      return [...state, newList];

    case CONSTANTS.ADD_CARD: {
      const newCard = {
        text: action.payload.text, ///here
        id: `card-${cardID}`
      };
      cardID += 1;

      const newState = state.map(list => {
        if (list.id === action.payload.listID) {
          ////here
          return {
            ...list,
            cards: [...list.cards, newCard]
          };
        } else {
          return list;
        }
      });

      return newState;
    }
    case CONSTANTS.DRAG_HAPPENED:
      const {
        droppableIdStart,
        droppableIdEnd,
        droppableIndexStart,
        droppableIndexEnd,
        draggableId
      } = action.payload;
      const newState = [...state];
      // in the same list
      if (droppableIdStart === droppableIdEnd) {
        const list = state.find(list => droppableIdStart === list.id);
        const card = list.cards.splice(droppableIndexStart, 1);
        list.cards.splice(droppableIndexEnd, 0, ...card);
      }

      // not in the same list
      if (droppableIdStart !== droppableIdEnd) {
        // list where drag happened
        const listStart = state.find(list => droppableIdStart === list.id);
        //pulling out the card from the list
        const card = listStart.cards.splice(droppableIndexStart, 1);
        //finiding list where drag ended
        const listEnd = state.find(list => droppableIdEnd === list.id);

        //put the card in the new list
        listEnd.cards.splice(droppableIndexEnd, 0, ...card);
      }

      return newState;

    default:
      return state;
  }
};

export default listReducer;

Фиктивные данные находятся в initialState.

, поскольку они Невозможно поместить мой код из такого большого количества файлов здесь, пожалуйста, рассмотрите возможность проверки моего репозитория GitHub, если это необходимо.

https://github.com/abhinav-anshul/consensolabs

Любая небольшая помощь действительно ценится. Спасибо за чтение.

Ответы [ 2 ]

1 голос
/ 01 февраля 2020

Использование store.subscribe ()

Это можно сделать, выполнив следующие действия:

  1. Использование store .subscribe () из API-интерфейса редукции для вызова функции обратного вызова после завершения каждой отправки действия.
  2. Внутри функции обратного вызова извлекайте последнее состояние редукции с помощью store.getState () и сохраните его в локальном хранилище.
  3. Наконец, обновите код для создания хранилища, установив initialState хранилища в состояние сохранения в локальном хранилище (если имеется). ), вот так:

var store = createStore(rootReducer, localStorageState || {})

1 голос
/ 01 февраля 2020

Вы можете использовать redux-persist для сохранения состояния в локальном хранилище.

В вашем магазине. js Файл, как показано ниже, чтобы сохранить данные 

import { applyMiddleware, createStore } from 'redux';
import { persistReducer, persistStore } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import thunk from 'redux-thunk';
import rootReducer from "../reducers";

const persistConfig = {
  blacklist: ['form'], //if you don't want to store in local storage
  key: 'root',
  storage,
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const middleware = applyMiddleware(thunk);
const store = createStore(persistedReducer, middleware);
const persistor = persistStore(store);
export { store, persistor };

Для получения дополнительной информации о Издержка сохранится, пожалуйста, проверьте ссылку

...