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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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