So aktualisieren Sie den Status mit React, Redux und Redux-Formular

Question

Ziemlich neu für diese Technologien und am Ende des Witzens. Ich habe zwei Komponenten; ein Elternteil, der ein Formular enthält (mit redux-form) und einen neuen Datensatz in eine Datenbank schreibt, und ein Kind, das einige Daten auflistet.

Die einzige Sache, die ich nicht zur Arbeit bekommen kann, erneuert diese untergeordnete Liste, wenn die Formularsendung abgeschlossen wird. Wenn ich die Seite aktualisiere, sind die neuen Daten sichtbar. Nach dem, was ich gelesen hatte, war es mein Verständnis, dass durch die Verkettung der Redux-Form mein Zustand sich automatisch auffrischen würde ... oder so ähnlich. Tue ich das überhaupt richtig? Hier ist alles ...

Mein Indexreduzierer:

import { combineReducers } from 'redux'; 
import { reducer as formReducer } from "redux-form"; 
import ItemsReducer from "../reducers/items"; 

const rootReducer = combineReducers({ 
    form: formReducer, 
    items: ItemsReducer 
}); 

export default rootReducer; 

Meine Artikel Minderer:

import { GET_ALL_ITEMS } from "../actions/items"; 

export default (state = {}, action) => { 
    switch (action.type) { 
     case GET_ALL_ITEMS: 
      return action.payload.data; 
     default: 
      return state; 
    } 
} 

Meine Aktionen:

import axios from "axios"; 

export const GET_ALL_ITEMS = "GET_ALL_ITEMS"; 
export const SAVE_ITEM = "SAVE_ITEM"; 

const ROOT_API_URL = "http://myapi:3000/api"; 

export function getAllItems() { 
    let request = axios.get(`${ROOT_API_URL}/items`); 
    return { 
     type: GET_ALL_ITEMS, 
     payload: request 
    }; 
} 

export function saveItem(item, callback) { 
    let request = axios 
     .post(`${ROOT_API_URL}/item`, item) 
     .then(() => callback()); 
    return { 
     type: SAVE_ITEM, 
     payload: request 
    }; 
} 

Die (abgekürzt) Eltern (Liste und Form):

import ItemsList from "./items_list"; 

... 

onSubmit = (item) => { 
    let { saveItem } = this.props; 
    saveItem(item,() => { 
     // this is successful 
    }); 
} 

... 

//the list in render() 
<div> 
    <ItemsList /> 
</div> 

... 

//redux-form wired up at bottom 

export default reduxForm({ 
    form: "EditItemForm", 
})(connect(null, { saveItem })(Items)); 

Das Kind Komponente:

import React, { Component } from "react"; 
import { connect } from "react-redux"; 
import { Link } from "react-router-dom"; 
import { getAllItems } from "../actions/items"; 

class Shows extends Component { 
    componentDidMount() { 
     this.props.getAllItems(); 
    } 

    render() { 
     return(
      <div className="body-content-partial"> 
       {this.renderItems()} 
      </div> 
     ); 
    } 

    renderItems() { 
     let { items } = this.props; 
     return items.map(item => { 
      return(
       <a href="#" key={item.id}> 
        <div className="list-item-noavatar list-lines-div"> 
         <div className="list-title"> 
          {item.name} 
         </div> 
         <div className="status-div"> 
          <span className="status-indicator"></span> 
          {item.active} 
         </div> 
        </div> 
       </a> 
      ); 
     }); 
    } 
} 

function mapStateToProps(state) { 
    return { items: state.items }; 
} 

export default connect(mapStateToProps, { getAllItems })(Items); 

Answer 1

OK, absolut es diesmal fixiert. Ich musste anrufen, um GetAllItems() auf dem Formular zu senden, und es in den Dispatch-Teil des Aufrufs connect() für das Redux-Formular-Setup übergeben. Beziehungsweise:

import { saveItem, getAllItems } from "../actions/items"; 

... 

onSubmit = (item) => { 
    let { saveItem, onSave, getAllItems } = this.props; 
    saveItem(item,() => { 
     onSave(); 
     getAllItems(); 
    }); 
} 

... 

export default reduxForm({ 
    form: "ItemEditForm", 
})(connect(null, { saveItem, getAllItems })(ItemEditForm));