Я пытаюсь создать клон 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
Любая небольшая помощь действительно ценится. Спасибо за чтение.