0

Работаю с react и redux несколько месяцев. Возникла задача создать приложение, использующее redux-persist. В описании, данном на github все выгладит просто. Но проблемы начинаются, когда я пытаюсь изменить состояние через редьюсер.

///index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';

import './index.css';
import App from './App';
import Tasks from './js/reducers/Tasks';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
import { PersistGate } from 'redux-persist/integration/react';

const initialState = {
    Tasks:  []
}

const persistConfig = {
    key: 'root',
    storage,
};

const persistedReducer = persistReducer(persistConfig, Tasks);

export const store = createStore(persistedReducer, initialState);
export const persistor = persistStore(store);

ReactDOM.render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            < App / >
        </PersistGate>
    </Provider>,
    document.getElementById('root')
);

serviceWorker.unregister();

///Tasks.js

const Tasks = (state={}, action) => {
    let newState = {};
    switch(action.type) {
        case 'ADD_TASK':
            state.Tasks.forEach(task => {
                if (task.TaskName === action.newTaskName) {
                    alert("Уже есть задача с таким именем");
                    return state;
                }
            })
            let token = '';
            for (let i = 0; i < 20; i++) {
                let randomCharIndex = Math.floor(Math.random() * action.newTaskName.value.length);
                token += action.newTaskName.value[randomCharIndex];
            }
            console.log("State", state);
            newState = state;
            let Tasks = [...state.Tasks,
                {
                    id: token,
                    TaskName: action.newTaskName.value,
                    TaskDescr: action.newTaskDescr.value,
                    TaskPriority: action.newTaskPriority.value,
                    TaskDone: action.newTaskDone,
                    TaskPlanDateTime: action.newTaskPlanDateTime.value,
                    TaskFinishDateTime: action.newTaskFinishDateTime.value
                }
            ]
            newState.Tasks = Tasks;
            console.log(newState);
            return newState;
        case 'DELETE_TASK':
            state.forEach(task => {
                if (task.id !== action.token) {
                    newState.push(task);
                }
            })
            return newState;
        case 'TOGGLE_TASK':
            state.forEach(task => {
                let newTask = {...task};
                if (newTask.id === action.token) {
                    newTask.TaskDone = !task.TaskDone;
                }
                newState.push(newTask);
            })
            return newState;
        default:
            return state;
    }
}

export default Tasks;

Прошу помочь разобраться.

1 ответ 1

0

Разобрался. Проблема заключалась в том, как я делаю копию состояния в редьюсере. Правильно должно быть так:

let newState = {...state};
1
  • осторожен будь с таким копированием
    – WVFFLIFE
    15 ноя 2019 в 14:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.