Как получить данные после того, как действие было выполнено в редуксе?

Question

Я хочу выполнить запрос PUT к моей базе данных firebase после того, как какое-либо действие было вызвано и выполнено. Мое глобальное состояние имеет массив объектов, называемых «элементы»; У меня есть некоторые действия, в которых я могу обновить этот массив, например, добавление объектов, удаление или редактирование его свойств. Я хочу отправить запрос сразу после добавления, редактирования или удаления

Мой код:

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», это означает, что он обновляет элементы в состоянии. Как я могу сделать запрос axios.put после того, как additem был вызван и полностью выполнен, чтобы я мог отправить обновленные 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.