React、Redux、およびredux-formを使用して状態をリフレッシュする方法

Question

これらのテクノロジにはまったく新しいものがあります。私は2つのコンポーネントを持っています。 （redux-formを使用して）フォームを含み、データベースに新しいレコードを書き込む親と、いくつかのデータをリストする子を含む。

フォームの送信が完了したら、その子リストを更新するだけです。ページを更新すると、新しいデータが表示されます。私が読んだところでは、私の国家が自動的にリフレッシュするような形をとっていることは私の理解でした。私はこれについて正しい方向に進むつもりですか？ここではすべてがあります...

マイインデックス減速：

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; 

マイアイテムリデューサ：

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; 
    } 
} 

私のアクション：

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 
    }; 
} 

（省略）親（リストとフォーム）：

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)); 

子コンポーネント：

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、絶対にそれをこの時間を固定しました。私はフォームのsubmitAllItems（）を呼び出すだけでなく、それをredux-formセットアップのconnect（）呼び出しのディスパッチ部分に渡す必要がありました。それぞれ：

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));