Состояние Redux возвращает html содержимое в поле массива - PullRequest
Новая
       9

Состояние Redux возвращает html содержимое в поле массива

0 голосов
/ 03 августа 2020

Я делаю простой проект стека mern, используя redux в качестве инструмента управления состоянием. Одно из моих состояний, содержащее поле массива для отображения всех данных из отображаемой базы данных HTML content.

Вот мой файл редукторов для моего redux, который является todo. js. 

const initialState={
        task:null,
        tasks:[],
        loading:true
    
    }
    export default function(state=initialState,action){
        const {type,payload}=action;
        switch(type){
            case ADD_TODO_SUCCESS:
            return{
                ...state,
                loading:false,
                task:payload
    
            }
            case ADDTODOS:
            return{
                ...state,
                tasks:payload,
                loading:false
                
            }

My todo. js файл внутри папки действий - 

export const displaytodos=()=>async dispatch=>{
    
    try{
    const res=await axios.get('/');
    
        dispatch({

            type:ADDTODOS,
            payload:res.data
        })
        
    }catch(err){
        const errors=err.response.data.errors;
        if(errors){
        dispatch({
            type:ADD_TODO_FAIL
        })
    }}
};

Я импортировал следующий файл в свое приложение. js

const Tasks = ({displaytodos,todo:{tasks,loading}}) => {
        useEffect(() => {
            displaytodos();
        
    }, [displaytodos])
    return (
        <div>
            
        </div>
    )
}

Tasks.propTypes = {
    displaytodos:PropTypes.func.isRequired,
    todo:PropTypes.object.isRequired,

}
const mapStateToProps=state=>({

    todo:state.todo
})

export default connect(mapStateToProps,{displaytodos}) ( Tasks)

В хранилище Redux при запуске сервера отображалось следующее состояние задачи. введите описание изображения здесь

Мой внутренний код - 

app.get('/',async(req,res)=>{
    try{
        
        let task=await Tasks.find({});
        
        res.json(task);


    }catch(err){
        console.log(err.message);
        res.status(500).send('Server error');

    }

    });
...