javascript - 如何在 redux 中完成操作后获取数据？

Question

我想在调用和执行某些操作后对我的 firebase 数据库执行 PUT 请求。我的全局状态有一个名为“items”的数组 os 对象；我有一些可以更新此数组的操作，例如添加对象、删除或编辑其属性。我确实想在添加、编辑或删除它们后立即发送请求

我的代码:

import React, {Component} from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {connect} from 'react-redux'
import axios from '../../axios'

import classes from './List.module.css'
import {Button,ListGroup} from 'reactstrap'
import Input from '../UI/Input/Input'
import Items from './Items/Items'


class List extends Component{

    componentWillMount() {
        axios.get('/list/items.json')
        .then(response=>{
           console.log("response.data")
           console.log(response.data)
           this.props.initialState(response.data)
        }).catch(error=>console.log(error))
      }

    render(){
        let inputElement = null
         if(this.props.input){
             inputElement=(
                <Input 
                changedName={this.props.changedName}
                changedDesc={this.props.changedDesc}
                addOrEdit={this.props.addItem}
                nameInput={this.props.state.nameInput}
                descInput={this.props.state.descInput}
                buttonText={this.props.state.buttonText}/>
             )
         } 

         let editElement = null
         if(this.props.state.edit){
            editElement=(
                <Input 
                changedName={this.props.changedName}
                changedDesc={this.props.changedDesc}
                addOrEdit={this.props.editItem}
                nameInput={this.props.state.nameInput}
                descInput={this.props.state.descInput}
                buttonText={this.props.state.buttonText}/>
             )
         }

         let itemElement = null

         if(this.props.items && this.props.items.length !== 0 ){
             itemElement = this.props.items.map((i,index)=>{
                 return <Items
                        className={classes.items}
                        id={index}
                        name={i.itemName}
                        key={index}
                        deleteClicked={()=>this.props.deleteItem(index)}
                        itemIndex={()=>this.props.itemIndexChanger(index)}
                        editInput={()=>this.props.editItemHandler(index)}
                        editIndex={this.props.state.editIndex}
                        editElement={editElement}/>
             })
         }else{
             itemElement = <h4 className={classes.items}>Please add an Item</h4>
         }

        return(
            <div className={classes.items}>
                <ListGroup> 
                    {itemElement}
                </ListGroup>
               <hr className={classes.hr}/>
                <Button 
                className={classes.button}
                onClick={this.props.toggleInputHandler} 
                size="sm"
                outline color='info'>
                    Add Items 
                    <FontAwesomeIcon icon='plus'/>
                </Button>
                {inputElement}
            </div>
        )
    }
}

const mapStateToProps = (state) =>{
    return{
        items:state.items,
        input:state.input,
        state:state,
    }
}

const mapDispatchToProps = dispatch=>{
    return{
        toggleInputHandler:()=>dispatch({type:'TOGGLE_INPUT_HANDLER'}),
        changedName:(event)=>dispatch({type:'CHANGED_NAME', payload:event.target.value}),
        changedDesc:(event)=>dispatch({type:'CHANGED_DESC',payload:event.target.value}),
        addItem:()=>{return(dispatch({type:'ADD_ITEM'}))},
        deleteItem:(index)=>dispatch({type:'DELETE_ITEM',index:index}),
        editItemHandler:(index)=>dispatch({type:'EDIT_ITEM_HANDLER',index:index}),
        editItem:()=>dispatch({type:'EDIT_ITEM'}),
        itemIndexChanger:(index)=>dispatch({type:'CHANGE_ITEM_INDEX',index:index}),
        initialState:(value)=>dispatch({type:'SET_STATE',payload:value})
    };
}


export default connect(mapStateToProps, mapDispatchToProps)(List)

在这里需要帮助:假设我使用 addItem 调度将对象添加到我的“items”数组，这意味着它更新了状态中的项目。在 additem 被调用并完全执行后，如何执行 axios.put 请求，以便将更新后的 state.items 发送到我的 firebase？

谢谢大家的关注!

Answer 1

使用纯 React 和 Redux，这种事情可以用 componentDidUpdate 来完成:

componentDidUpdate(prevProps, prevState) {
    if (prevProps.someValue !== this.props.someValue) {
        axios.put( /* ...some axios call to sync someValue */ )
    }
}

这对于简单的一次性事情来说很好，但是如果你有大量的值要同步，或者如果你想从不同的组件来做，或者你想踢从操作中关闭复杂的异步行为。

这些行为被称为副作用，是中间件库的目的，例如 redux-thunk。和 redux-saga , 它们在这方面各有优势和劣势。

如果您预见到您的应用程序会大量使用 API 更新等副作用或响应操作的其他复杂异步行为，我强烈建议您熟悉这些库之一，而不是使用 componentDidUpdate 路线。