Question

我一直在尝试实现redux，我可以使用redux将数据发布到数据库中，然后在react中获取结果。但是我在如何处理reducer和实现delete情况上有困难。

我以前曾尝试使用通过sqlite删除数据库中数据的函数，但结果却不尽相同。如果我的记忆正确，我可以使用原型方法从数据库中删除数据，而无需更改状态。

 import request from 'superagent'

 export function receiveData(data) {
     return {
         type: 'RECEIVE_DATA',
         payload: data
     }
 }

 export function fetchData() {
     return (dispatch) => {
         request.get('/api/v1/data')
         .then((res) => {
             return res.body
         }).then(data => {
             dispatch(receiveCats(data))
         })
     }
 }


function reducer(state = [], action) {
    switch (action.type) {
        case 'RECEIVE_DATA':
            return action.payload
        case 'ADD_DATA':
            return action.add
        default:
            return state
    }   
}

// case 'DELETE_CAT':
////// return action.del
// to be added

export default reducer

    export function addData(data) {
        return dispatch => {
            request
            .post('/api/v1/data')
            .send(data)
            .end((err, res) => {
                if (err) {
                    console.error(err.message)
                    return
                }
                dispatch(addDataAction(data))
            })
        }
    }

    function addDataAction() {
        return {
            type: 'ADD_DATA',
            payload: {
                name: name,
                // age: age,
                // address: address
            }
        }
    }

我想了解redux的工作原理，但这对我来说是一个障碍。

任何帮助将不胜感激。谢谢。

Answer 1

也许您误会了一些东西。没有什么叫remove data from db using redux或post data into the database using redux。

在上面的示例中，将addData归约器简化为post data into the database using redux的过程只是向服务器调用了发布请求，然后将发布的数据保存在Redux store中。

如果要从数据库中删除数据，请调用相应的delete api，然后将请求的结果保存在Redux store中。

Redux只是存储application state的地方，该状态将决定应用程序的UI外观。

您可以阅读Redux Introduction来了解什么是Redux。

Answer 2

假设您已经实现了delete / remove api，该API会返回已删除的ID

  function reducer(state = [], action) {
            switch (action.type) {
                case 'RECEIVE_DATA':
                    return Object.assign({},state, {data:action.payload});
                case 'ADD_DATA':
                    return Object.assign({},state, data.concat(action.add));
                case 'REMOVE_DATA':
                    return Object.assign({},state, 
                   {data:state.data.filter((obj)=>obj.id!==id)});
                default:
                    return state
            }   
        }

尝试这样的事情总是要记住使用不变性的概念。在此示例中，它将返回一个新对象，而不是更新先前的对象。

如何使用Redux从数据库中删除数据？

2 个答案: